安卓软件开发:Jetpack Compose中常见的核心概念总结-6

原创

Nimyears

发布于 2024-11-06 08:46:56

1290

文章被收录于专栏：JetpackCompose M3JetpackCompose M3 玩转全栈

26. 背景和修饰

Background Modifier - 设置背景颜色

Box(
    modifier = Modifier
        .size(200.dp)
        .background(Color.Cyan)
) {
    Text("Background Example")
}

Border Modifier - 添加边框

Box(
    modifier = Modifier
        .size(100.dp)
        .border(2.dp, Color.Black)
) {
    Text("With Border")
}

27. Flex布局和调整尺寸

Modifier.weight - 权重布局

Row(modifier = Modifier.fillMaxWidth()) {
    Box(
        modifier = Modifier
            .weight(1f)
            .height(50.dp)
            .background(Color.Red)
    )
    Box(
        modifier = Modifier
            .weight(1f)
            .height(50.dp)
            .background(Color.Blue)
    )
}

weight: 在Row或Column中为组件分配比例空间。

Spacer - 间距占位符

Spacer(modifier = Modifier.height(16.dp))

Spacer: 添加一个空白占位符，用于调整组件间距。

28. 动态内容显示

LaunchedEffect - 启动副作用

LaunchedEffect(key1 = Unit) {
    delay(1000L)
    println("Task completed")
}

LaunchedEffect: 运行一个挂起函数和监听依赖项的变化。

SideEffect - 简单的副作用

SideEffect {
    println("This runs on every recomposition")
}

SideEffect: 用于非挂起的副作用，如日志输出或非Compose环境的函数调用。

29. 折叠列表和展开列表

ExpandableList - 展开和折叠的列表

var expanded by remember { mutableStateOf(false) }

Column {
    Text(
        text = if (expanded) "Hide Details" else "Show Details",
        modifier = Modifier.clickable { expanded = !expanded }
    )
    if (expanded) {
        Text("Here are more details...")
    }
}

LazyColumn - 可扩展列表

LazyColumn {
    itemsIndexed(listOfItems) { index, item ->
        Text("Item $index: $item")
    }
}

LazyColumn: 动态加载的列表，可以根据数据项渲染UI。

30. 嵌套滚动

NestedScroll - 嵌套滚动处理

val nestedScrollConnection = remember { object : NestedScrollConnection {
    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
        return Offset.Zero
    }
} }

Column(
    modifier = Modifier.nestedScroll(nestedScrollConnection)
) {
    // Nested scrollable components
}