1. 基本布局
Column - 列布局
代码语言:kotlin
AI代码解释
Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text("This is a column") Button(onClick = { /* TODO*/ }) { Text("Click Nim") } }
- Column: 用于垂直排列子组件。
- verticalArrangement: 垂直排列子组件的方式。
- horizontalAlignment: 水平方向上对齐方式。
Row - 行布局
代码语言:kotlin
AI代码解释
Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { Text("Left Nim") Text("Right Nim") }
- Row: 用于水平排列子组件。
- horizontalArrangement: 水平方向上排列子组件的方式。
- verticalAlignment: 垂直方向上对齐方式。
2. 修饰符使用
Modifier.padding(aly.tehjunk.com) - 填充
代码语言:kotlin
AI代码解释
Text( text = "Hello Nim", modifier = Modifier.padding(16.dp) )
- padding: 为组件添加内边距。
Modifier.clickable() - 点击事件
代码语言:kotlin
AI代码解释
Text( text = "Click Me", modifier = Modifier.clickable { /* action */ } )
- clickable: 使组件可以响应点击事件。
Modifier.background() - 背景颜色
代码语言:kotlin
AI代码解释
Box( modifier = Modifier .size(100.dp) .background(Color.Red) )
- background: 设置组件的背景颜色。
3. 状态管理
State - 状态
代码语言:kotlin
AI代码解释
var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text("Count: $count") }
- remember: 记住状态以在重组时保持不变。
- mutableStateOf: 创建一个可变的状态。
State Hoisting - 状态提升
代码语言:kotlin
AI代码解释
@Composable fun Counter( count: Int, onIncrement: () -> Unit ) { Button(onClick = onIncrement) { Text("Count: $count") } }
- State Hoisting: 将状态提升到更高的层次以使组件无状态。
4. 样式与主题
Typography - 排版
代码语言:kotlin
AI代码解释
Text( text = "Styled Tv", style = MaterialTheme.typography.h6 )
- MaterialTheme.typography: 使用Material Design的排版样式。
Color - 颜色
代码语言:kotlin
AI代码解释
Text( text = "Color Tv", color = Color.Blue )
- color: 设置文本颜色。
5. 动画
animateFloatAsState - 浮点动画
代码语言:kotlin
AI代码解释
val animatedAlpha by animateFloatAsState( targetValue = if (isVisible) 1f else 0f, animationSpec = tween(durationMillis = 500) ) Box( modifier = Modifier.alpha(animatedAlpha) )
- animateFloatAsState: 动画效果随着状态变化而变动。
- tween: 指定动画的时间和过渡效果。
AnimatedVisibility - 动画显示与隐藏
代码语言:kotlin
AI代码解释
AnimatedVisibility(visible = isVisible) { Text("This is visible!") }
- AnimatedVisibility: 组件在显示和隐藏时自动应用动画。