Jetpack Compose 组件属性详细说明

本文档详细说明 Jetpack Compose 中各个组件的所有属性、参数和使用方法。

---

📋 目录

1. 布局组件
2. 文本组件
3. 按钮组件
4. 输入组件
5. 列表组件
6. 导航组件
7. 对话框组件
8. 显示组件
9. 容器组件
10. 修饰符 (Modifier)

---

布局组件

Column

垂直排列子组件的布局容器。

函数签名:

@Composable
fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
)

参数说明:

参数	类型	默认值	说明
modifier	Modifier	Modifier	应用于布局的修饰符
verticalArrangement	Arrangement.Vertical	Arrangement.Top	垂直方向子组件的排列方式
horizontalAlignment	Alignment.Horizontal	Alignment.Start	水平方向子组件的对齐方式
content	@Composable ColumnScope.() -> Unit	-	子组件内容

verticalArrangement 可选值:

• Arrangement.Top - 顶部对齐
• Arrangement.Bottom - 底部对齐
• Arrangement.Center - 居中对齐
• Arrangement.SpaceBetween - 两端对齐，中间均匀分布
• Arrangement.SpaceAround - 每个元素周围均匀分布空间
• Arrangement.SpaceEvenly - 元素之间均匀分布空间
• Arrangement.spacedBy(space: Dp) - 元素之间固定间距

horizontalAlignment 可选值:

• Alignment.Start - 左对齐（LTR）或右对齐（RTL）
• Alignment.End - 右对齐（LTR）或左对齐（RTL）
• Alignment.CenterHorizontally - 水平居中
• Alignment.Left - 左对齐
• Alignment.Right - 右对齐

使用示例:

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("第一项")
    Text("第二项")
    Text("第三项")
}

---

Row

水平排列子组件的布局容器。

函数签名:

@Composable
fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
)

参数说明:

参数	类型	默认值	说明
modifier	Modifier	Modifier	应用于布局的修饰符
horizontalArrangement	Arrangement.Horizontal	Arrangement.Start	水平方向子组件的排列方式
verticalAlignment	Alignment.Vertical	Alignment.Top	垂直方向子组件的对齐方式
content	@Composable RowScope.() -> Unit	-	子组件内容

horizontalArrangement 可选值:

• Arrangement.Start - 起始对齐
• Arrangement.End - 结束对齐
• Arrangement.Center - 居中对齐
• Arrangement.SpaceBetween - 两端对齐
• Arrangement.SpaceAround - 周围均匀分布
• Arrangement.SpaceEvenly - 均匀分布
• Arrangement.spacedBy(space: Dp) - 固定间距

verticalAlignment 可选值:

• Alignment.Top - 顶部对齐
• Alignment.Bottom - 底部对齐
• Alignment.CenterVertically - 垂直居中

使用示例:

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("左侧")
    Text("右侧")
}

---

Box

允许子组件重叠的布局容器。

函数签名:

@Composable
fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
)

参数说明:

参数	类型	默认值	说明
modifier	Modifier	Modifier	应用于布局的修饰符
contentAlignment	Alignment	Alignment.TopStart	子组件的默认对齐方式
propagateMinConstraints	Boolean	false	是否将最小约束传播给子组件
content	@Composable BoxScope.() -> Unit	-	子组件内容

contentAlignment 常用值:

• Alignment.TopStart - 左上角
• Alignment.TopCenter - 顶部居中
• Alignment.TopEnd - 右上角
• Alignment.CenterStart - 左侧居中
• Alignment.Center - 居中
• Alignment.CenterEnd - 右侧居中
• Alignment.BottomStart - 左下角
• Alignment.BottomCenter - 底部居中
• Alignment.BottomEnd - 右下角

使用示例:

Box(
    modifier = Modifier.size(200.dp),
    contentAlignment = Alignment.Center
) {
    // 背景
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Gray)
    )
    // 前景
    Text("居中文本")
}

---

ConstraintLayout

基于约束的布局系统，类似 XML 中的 ConstraintLayout。

函数签名:

@Composable
fun ConstraintLayout(
    modifier: Modifier = Modifier,
    optimizationLevel: Int = Optimizer.OPTIMIZATION_STANDARD,
    crossinline content: @Composable ConstraintLayoutScope.() -> Unit
)

参数说明:

参数	类型	默认值	说明
modifier	Modifier	Modifier	应用于布局的修饰符
optimizationLevel	Int	Optimizer.OPTIMIZATION_STANDARD	优化级别
content	@Composable ConstraintLayoutScope.() -> Unit	-	子组件内容

优化级别:

• Optimizer.OPTIMIZATION_NONE - 不优化
• Optimizer.OPTIMIZATION_STANDARD - 标准优化
• Optimizer.OPTIMIZATION_DIRECT - 直接优化
• Optimizer.OPTIMIZATION_CHAIN - 链式优化

使用示例:

ConstraintLayout(
    modifier = Modifier.fillMaxSize()
) {
    val (text1, text2, button) = createRefs()
    
    Text(
        text = "文本1",
        modifier = Modifier.constrainAs(text1) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(parent.start, margin = 16.dp)
        }
    )
    
    Text(
        text = "文本2",
        modifier = Modifier.constrainAs(text2) {
            top.linkTo(text1.bottom, margin = 8.dp)
            start.linkTo(text1.start)
        }
    )
    
    Button(
        onClick = { },
        modifier = Modifier.constrainAs(button) {
            bottom.linkTo(parent.bottom, margin = 16.dp)
            end.linkTo(parent.end, margin = 16.dp)
        }
    ) {
        Text("按钮")
    }
}

约束方法:

• top.linkTo() - 顶部约束
• bottom.linkTo() - 底部约束
• start.linkTo() - 起始约束
• end.linkTo() - 结束约束
• centerHorizontallyTo() - 水平居中
• centerVerticallyTo() - 垂直居中
• centerTo() - 完全居中

---

文本组件

Text

显示文本的组件。

函数签名:

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)

参数说明:

参数	类型	默认值	说明
text	String	-	要显示的文本内容
modifier	Modifier	Modifier	修饰符
color	Color	Color.Unspecified	文本颜色
fontSize	TextUnit	TextUnit.Unspecified	字体大小（如 16.sp）
fontStyle	FontStyle?	null	字体样式（FontStyle.Normal 或 FontStyle.Italic）
fontWeight	FontWeight?	null	字体粗细（FontWeight.Normal, FontWeight.Bold 等）
fontFamily	FontFamily?	null	字体族
letterSpacing	TextUnit	TextUnit.Unspecified	字符间距
textDecoration	TextDecoration?	null	文本装饰（TextDecoration.Underline, TextDecoration.LineThrough）
textAlign	TextAlign?	null	文本对齐方式
lineHeight	TextUnit	TextUnit.Unspecified	行高
overflow	TextOverflow	TextOverflow.Clip	溢出处理方式
softWrap	Boolean	true	是否自动换行
maxLines	Int	Int.MAX_VALUE	最大行数
minLines	Int	1	最小行数
onTextLayout	(TextLayoutResult) -> Unit	{}	文本布局回调
style	TextStyle	LocalTextStyle.current	文本样式

textAlign 可选值:

• TextAlign.Left - 左对齐
• TextAlign.Right - 右对齐
• TextAlign.Center - 居中
• TextAlign.Justify - 两端对齐
• TextAlign.Start - 起始对齐（根据语言方向）
• TextAlign.End - 结束对齐（根据语言方向）

overflow 可选值:

• TextOverflow.Clip - 裁剪溢出文本
• TextOverflow.Ellipsis - 使用省略号
• TextOverflow.Visible - 显示溢出文本

fontWeight 常用值:

• FontWeight.Thin (100)
• FontWeight.ExtraLight (200)
• FontWeight.Light (300)
• FontWeight.Normal (400)
• FontWeight.Medium (500)
• FontWeight.SemiBold (600)
• FontWeight.Bold (700)
• FontWeight.ExtraBold (800)
• FontWeight.Black (900)

使用示例:

Text(
    text = "示例文本",
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Blue,
    textAlign = TextAlign.Center,
    maxLines = 2,
    overflow = TextOverflow.Ellipsis,
    modifier = Modifier.fillMaxWidth()
)

---

TextField

单行文本输入框。

函数签名:

@Composable
fun TextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = TextStyle.Default,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = TextFieldDefaults.shape,
    colors: TextFieldColors = TextFieldDefaults.colors()
)

参数说明:

参数	类型	默认值	说明
value	String	-	文本值
onValueChange	(String) -> Unit	-	值变化回调
modifier	Modifier	Modifier	修饰符
enabled	Boolean	true	是否启用
readOnly	Boolean	false	是否只读
textStyle	TextStyle	TextStyle.Default	文本样式
label	@Composable (() -> Unit)?	null	标签
placeholder	@Composable (() -> Unit)?	null	占位符
leadingIcon	@Composable (() -> Unit)?	null	前导图标
trailingIcon	@Composable (() -> Unit)?	null	后置图标
isError	Boolean	false	是否显示错误状态
visualTransformation	VisualTransformation	VisualTransformation.None	视觉转换（如密码遮罩）
keyboardOptions	KeyboardOptions	KeyboardOptions.Default	键盘选项
keyboardActions	KeyboardActions	KeyboardActions.Default	键盘操作
singleLine	Boolean	false	是否单行
maxLines	Int	Int.MAX_VALUE	最大行数
minLines	Int	1	最小行数
interactionSource	MutableInteractionSource	-	交互源
shape	Shape	TextFieldDefaults.shape	形状
colors	TextFieldColors	TextFieldDefaults.colors()	颜色配置

KeyboardOptions 配置:

KeyboardOptions(
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Default,
    capitalization: KeyboardCapitalization = KeyboardCapitalization.None,
    autoCorrect: Boolean = true,
    autoComplete: Boolean = true
)

KeyboardType 可选值:

• KeyboardType.Text - 文本
• KeyboardType.Ascii - ASCII
• KeyboardType.Number - 数字
• KeyboardType.Phone - 电话
• KeyboardType.Uri - URI
• KeyboardType.Email - 邮箱
• KeyboardType.Password - 密码
• KeyboardType.NumberPassword - 数字密码
• KeyboardType.Decimal - 小数

ImeAction 可选值:

• ImeAction.None - 无操作
• ImeAction.Go - 前往
• ImeAction.Search - 搜索
• ImeAction.Send - 发送
• ImeAction.Next - 下一个
• ImeAction.Done - 完成
• ImeAction.Previous - 上一个
• ImeAction.Default - 默认

使用示例:

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("用户名") },
    placeholder = { Text("请输入用户名") },
    leadingIcon = { Icon(Icons.Default.Person, null) },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, null)
            }
        }
    },
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Text,
        imeAction = ImeAction.Done
    ),
    keyboardActions = KeyboardActions(
        onDone = { /* 处理完成 */ }
    ),
    singleLine = true,
    modifier = Modifier.fillMaxWidth()
)

---

OutlinedTextField

带边框的文本输入框。

函数签名:

@Composable
fun OutlinedTextField(
    // 参数与 TextField 相同
)

使用示例:

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("标签") },
    modifier = Modifier.fillMaxWidth()
)

---

按钮组件

Button

Material Design 按钮。

函数签名:

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

参数说明:

参数	类型	默认值	说明
onClick	() -> Unit	-	点击事件
modifier	Modifier	Modifier	修饰符
enabled	Boolean	true	是否启用
shape	Shape	ButtonDefaults.shape	形状
colors	ButtonColors	ButtonDefaults.buttonColors()	颜色配置
elevation	ButtonElevation?	ButtonDefaults.buttonElevation()	elevation 配置
border	BorderStroke?	null	边框
contentPadding	PaddingValues	ButtonDefaults.ContentPadding	内容内边距
interactionSource	MutableInteractionSource	-	交互源
content	@Composable RowScope.() -> Unit	-	按钮内容

使用示例:

Button(
    onClick = { /* 点击事件 */ },
    enabled = true,
    modifier = Modifier.padding(16.dp),
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Blue,
        contentColor = Color.White
    ),
    shape = RoundedCornerShape(8.dp)
) {
    Icon(Icons.Default.Add, null)
    Spacer(modifier = Modifier.width(8.dp))
    Text("按钮")
}

---

TextButton

文本样式的按钮。

函数签名:

@Composable
fun TextButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = TextButtonDefaults.shape,
    colors: ButtonColors = TextButtonDefaults.buttonColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = TextButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

使用示例:

TextButton(onClick = { }) {
    Text("文本按钮")
}

---

OutlinedButton

轮廓样式的按钮。

函数签名:

@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = OutlinedButtonDefaults.shape,
    colors: ButtonColors = OutlinedButtonDefaults.buttonColors(),
    border: BorderStroke? = OutlinedButtonDefaults.border,
    contentPadding: PaddingValues = OutlinedButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

使用示例:

OutlinedButton(onClick = { }) {
    Text("轮廓按钮")
}

---

IconButton

图标按钮。

函数签名:

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
)

使用示例:

IconButton(onClick = { }) {
    Icon(Icons.Default.Favorite, contentDescription = "收藏")
}

---

FloatingActionButton

浮动操作按钮。

函数签名:

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = FloatingActionButtonDefaults.shape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = FloatingActionButtonDefaults.contentColor,
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
)

使用示例:

FloatingActionButton(
    onClick = { },
    containerColor = MaterialTheme.colorScheme.primary
) {
    Icon(Icons.Default.Add, contentDescription = "添加")
}

---

输入组件

Checkbox

复选框。

函数签名:

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

参数说明:

参数	类型	默认值	说明
checked	Boolean	-	选中状态
onCheckedChange	((Boolean) -> Unit)?	-	状态变化回调
modifier	Modifier	Modifier	修饰符
enabled	Boolean	true	是否启用
colors	CheckboxColors	CheckboxDefaults.colors()	颜色配置
interactionSource	MutableInteractionSource	-	交互源

使用示例:

var checked by remember { mutableStateOf(false) }

Checkbox(
    checked = checked,
    onCheckedChange = { checked = it }
)

---

RadioButton

单选按钮。

函数签名:

@Composable
fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

使用示例:

var selectedOption by remember { mutableStateOf("option1") }

RadioButton(
    selected = selectedOption == "option1",
    onClick = { selectedOption = "option1" }
)

---

Switch

开关。

函数签名:

@Composable
fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: SwitchColors = SwitchDefaults.colors(),
    thumbContent: (@Composable () -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

使用示例:

var isChecked by remember { mutableStateOf(false) }

Switch(
    checked = isChecked,
    onCheckedChange = { isChecked = it }
)

---

Slider

滑块。

函数签名:

@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

参数说明:

参数	类型	默认值	说明
value	Float	-	当前值
onValueChange	(Float) -> Unit	-	值变化回调
modifier	Modifier	Modifier	修饰符
enabled	Boolean	true	是否启用
valueRange	ClosedFloatingPointRange<Float>	0f..1f	值范围
steps	Int	0	分段数（0 表示连续）
onValueChangeFinished	(() -> Unit)?	null	值变化完成回调
colors	SliderColors	SliderDefaults.colors()	颜色配置
interactionSource	MutableInteractionSource	-	交互源

使用示例:

var progress by remember { mutableStateOf(50f) }

Slider(
    value = progress,
    onValueChange = { progress = it },
    valueRange = 0f..100f,
    steps = 4
)

---

列表组件

LazyColumn

垂直懒加载列表。

函数签名:

@Composable
fun LazyColumn(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical = if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyListScope.() -> Unit
)

参数说明:

参数	类型	默认值	说明
modifier	Modifier	Modifier	修饰符
state	LazyListState	rememberLazyListState()	列表状态
contentPadding	PaddingValues	PaddingValues(0.dp)	内容内边距
reverseLayout	Boolean	false	是否反向布局
verticalArrangement	Arrangement.Vertical	Arrangement.Top	垂直排列方式
horizontalAlignment	Alignment.Horizontal	Alignment.Start	水平对齐方式
flingBehavior	FlingBehavior	ScrollableDefaults.flingBehavior()	滑动行为
userScrollEnabled	Boolean	true	是否允许用户滚动
content	LazyListScope.() -> Unit	-	列表内容

LazyListScope 方法:

• item { } - 添加单个项目
• items(count: Int) { index -> } - 添加多个项目（通过索引）
• items(items: List<T>, key: ((item: T) -> Any)? = null) { item -> } - 添加列表项目
• itemsIndexed(items: List<T>) { index, item -> } - 添加带索引的列表项目

使用示例:

val items = remember { (1..100).toList() }

LazyColumn(
    modifier = Modifier.fillMaxSize(),
    contentPadding = PaddingValues(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    item {
        Text("头部", style = MaterialTheme.typography.headlineMedium)
    }
    
    items(items = items, key = { it }) { item ->
        Card(
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("项目 $item", modifier = Modifier.padding(16.dp))
        }
    }
    
    item {
        Text("底部", style = MaterialTheme.typography.bodyMedium)
    }
}

---

LazyRow

水平懒加载列表。

函数签名:

@Composable
fun LazyRow(
    modifier: Modifier = Modifier,
    state: LazyListState = rememberLazyListState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    horizontalArrangement: Arrangement.Horizontal = if (!reverseLayout) Arrangement.Start else Arrangement.End,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyListScope.() -> Unit
)

使用示例:

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(horizontal = 16.dp)
) {
    items(items = items) { item ->
        ItemCard(item = item)
    }
}

---

LazyVerticalGrid

垂直网格列表。

函数签名:

@Composable
fun LazyVerticalGrid(
    columns: GridCells,
    modifier: Modifier = Modifier,
    state: LazyGridState = rememberLazyGridState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(0.dp),
    horizontalArrangement: Arrangement.Horizontal = Arrangement.spacedBy(0.dp),
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    content: LazyGridScope.() -> Unit
)

GridCells 类型:

• GridCells.Fixed(count: Int) - 固定列数
• GridCells.Adaptive(minSize: Dp) - 自适应列数（根据最小尺寸）

使用示例:

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    contentPadding = PaddingValues(16.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(items = items) { item ->
        ItemCard(item = item)
    }
}

---

导航组件

TabRow

固定标签栏。

函数签名:

@Composable
fun TabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    container: @Composable (Modifier) -> Unit = @Composable { modifier ->
        Surface(modifier = modifier) {}
    },
    contentColor: Color = TabRowDefaults.contentColor,
    divider: @Composable () -> Unit = @Composable {
        TabRowDefaults.Divider()
    },
    indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
        TabRowDefaults.Indicator()
    },
    tabs: @Composable () -> Unit
)

参数说明:

参数	类型	默认值	说明
selectedTabIndex	Int	-	选中的标签索引
modifier	Modifier	Modifier	修饰符
container	@Composable (Modifier) -> Unit	Surface	容器组件
contentColor	Color	TabRowDefaults.contentColor	内容颜色
divider	@Composable () -> Unit	TabRowDefaults.Divider()	分隔线
indicator	@Composable (List<TabPosition>) -> Unit	TabRowDefaults.Indicator()	指示器
tabs	@Composable () -> Unit	-	标签内容

使用示例:

var selectedTabIndex by remember { mutableStateOf(0) }
val tabs = listOf("标签1", "标签2", "标签3")

TabRow(selectedTabIndex = selectedTabIndex) {
    tabs.forEachIndexed { index, title ->
        Tab(
            selected = selectedTabIndex == index,
            onClick = { selectedTabIndex = index },
            text = { Text(title) }
        )
    }
}

---

ScrollableTabRow

可滚动的标签栏。

函数签名:

@Composable
fun ScrollableTabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    edgePadding: Dp = TabRowDefaults.ScrollableTabRowPadding,
    container: @Composable (Modifier) -> Unit = @Composable { modifier ->
        Surface(modifier = modifier) {}
    },
    contentColor: Color = TabRowDefaults.contentColor,
    divider: @Composable () -> Unit = @Composable {
        TabRowDefaults.Divider()
    },
    indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
        TabRowDefaults.Indicator()
    },
    tabs: @Composable () -> Unit
)

使用示例:

ScrollableTabRow(selectedTabIndex = selectedTabIndex) {
    tabs.forEachIndexed { index, title ->
        Tab(
            selected = selectedTabIndex == index,
            onClick = { selectedTabIndex = index },
            text = { Text(title) }
        )
    }
}

---

Tab

标签项。

函数签名:

@Composable
fun Tab(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    text: @Composable (() -> Unit)? = null,
    icon: @Composable (() -> Unit)? = null,
    selectedContentColor: Color = TabDefaults.selectedContentColor(),
    unselectedContentColor: Color = TabDefaults.unselectedContentColor(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

使用示例:

Tab(
    selected = true,
    onClick = { },
    text = { Text("标签") },
    icon = { Icon(Icons.Default.Home, null) }
)

---

NavigationBar

底部导航栏（Material 3）。

函数签名:

@Composable
fun NavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationBarDefaults.containerColor,
    contentColor: Color = MaterialTheme.colorScheme.contentColorFor(containerColor),
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
    windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
)

使用示例:

NavigationBar {
    items.forEach { item ->
        NavigationBarItem(
            icon = { Icon(item.icon, null) },
            label = { Text(item.label) },
            selected = selectedItem == item.route,
            onClick = { selectedItem = item.route }
        )
    }
}

---

NavigationBarItem

底部导航栏项。

函数签名:

@Composable
fun NavigationBarItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: @Composable (() -> Unit)? = null,
    alwaysShowLabel: Boolean = true,
    colors: NavigationBarItemColors = NavigationBarItemDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

使用示例:

NavigationBarItem(
    selected = true,
    onClick = { },
    icon = { Icon(Icons.Default.Home, null) },
    label = { Text("首页") }
)

---

对话框组件

Dialog

自定义对话框。

函数签名:

@Composable
fun Dialog(
    onDismissRequest: () -> Unit,
    properties: DialogProperties = DialogProperties(),
    content: @Composable () -> Unit
)

参数说明:

参数	类型	默认值	说明
onDismissRequest	() -> Unit	-	关闭请求回调
properties	DialogProperties	DialogProperties()	对话框属性
content	@Composable () -> Unit	-	对话框内容

DialogProperties:

DialogProperties(
    dismissOnBackPress: Boolean = true,
    dismissOnClickOutside: Boolean = true,
    usePlatformDefaultWidth: Boolean = true,
    decorFitsSystemWindows: Boolean = true
)

使用示例:

var showDialog by remember { mutableStateOf(false) }

if (showDialog) {
    Dialog(
        onDismissRequest = { showDialog = false },
        properties = DialogProperties(
            dismissOnBackPress = true,
            dismissOnClickOutside = true
        )
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp)
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("对话框内容")
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = { showDialog = false }) {
                    Text("关闭")
                }
            }
        }
    }
}

---

AlertDialog

警告对话框。

函数签名:

@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,
    icon: @Composable (() -> Unit)? = null,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    shape: Shape = AlertDialogDefaults.shape,
    containerColor: Color = AlertDialogDefaults.containerColor,
    iconContentColor: Color = AlertDialogDefaults.iconContentColor,
    titleContentColor: Color = AlertDialogDefaults.titleContentColor,
    textContentColor: Color = AlertDialogDefaults.textContentColor,
    tonalElevation: Dp = AlertDialogDefaults.TonalElevation
)

参数说明:

参数	类型	默认值	说明
onDismissRequest	() -> Unit	-	关闭请求回调
confirmButton	@Composable () -> Unit	-	确认按钮
modifier	Modifier	Modifier	修饰符
dismissButton	@Composable (() -> Unit)?	null	取消按钮
icon	@Composable (() -> Unit)?	null	图标
title	@Composable (() -> Unit)?	null	标题
text	@Composable (() -> Unit)?	null	文本内容
shape	Shape	AlertDialogDefaults.shape	形状
containerColor	Color	AlertDialogDefaults.containerColor	容器颜色
iconContentColor	Color	AlertDialogDefaults.iconContentColor	图标颜色
titleContentColor	Color	AlertDialogDefaults.titleContentColor	标题颜色
textContentColor	Color	AlertDialogDefaults.textContentColor	文本颜色
tonalElevation	Dp	AlertDialogDefaults.TonalElevation	高程

使用示例:

var showAlert by remember { mutableStateOf(false) }

if (showAlert) {
    AlertDialog(
        onDismissRequest = { showAlert = false },
        icon = { Icon(Icons.Default.Warning, null) },
        title = { Text("警告") },
        text = { Text("确定要执行此操作吗？") },
        confirmButton = {
            TextButton(onClick = { showAlert = false }) {
                Text("确定")
            }
        },
        dismissButton = {
            TextButton(onClick = { showAlert = false }) {
                Text("取消")
            }
        }
    )
}

---

Popup

弹出窗口。

函数签名:

@Composable
fun Popup(
    alignment: Alignment = Alignment.TopStart,
    offset: IntOffset = IntOffset(0, 0),
    onDismissRequest: (() -> Unit)? = null,
    properties: PopupProperties = PopupProperties(),
    content: @Composable () -> Unit
)

参数说明:

参数	类型	默认值	说明
alignment	Alignment	Alignment.TopStart	对齐方式
offset	IntOffset	IntOffset(0, 0)	偏移量
onDismissRequest	(() -> Unit)?	null	关闭请求回调
properties	PopupProperties	PopupProperties()	弹出窗口属性
content	@Composable () -> Unit	-	内容

PopupProperties:

PopupProperties(
    dismissOnBackPress: Boolean = false,
    dismissOnClickOutside: Boolean = false,
    focusable: Boolean = false,
    excludeFromSystemGesture: Boolean = false,
    clippingEnabled: Boolean = true,
    securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit
)

使用示例:

var showPopup by remember { mutableStateOf(false) }
var offset by remember { mutableStateOf(IntOffset.Zero) }

Box(
    modifier = Modifier
        .onGloballyPositioned { coordinates ->
            val position = coordinates.positionInWindow()
            offset = IntOffset(
                x = position.x.toInt(),
                y = (position.y + coordinates.size.height).toInt()
            )
        }
        .clickable { showPopup = true }
) {
    Text("点击显示弹窗")
}

if (showPopup) {
    Popup(
        offset = offset,
        onDismissRequest = { showPopup = false },
        properties = PopupProperties(
            dismissOnBackPress = true,
            dismissOnClickOutside = true
        )
    ) {
        Card {
            Text("弹出内容")
        }
    }
}

---

显示组件

Image

图片组件。

函数签名:

@Composable
fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
)

参数说明:

参数	类型	默认值	说明
painter	Painter	-	图片绘制器
contentDescription	String?	-	内容描述（无障碍）
modifier	Modifier	Modifier	修饰符
alignment	Alignment	Alignment.Center	对齐方式
contentScale	ContentScale	ContentScale.Fit	内容缩放方式
alpha	Float	DefaultAlpha	透明度（0f-1f）
colorFilter	ColorFilter?	null	颜色过滤器

contentScale 可选值:

• ContentScale.Fit - 适应容器，保持宽高比
• ContentScale.Crop - 裁剪以填充容器
• ContentScale.FillBounds - 填充边界，不保持宽高比
• ContentScale.FillWidth - 填充宽度
• ContentScale.FillHeight - 填充高度
• ContentScale.Inside - 适应内部，保持宽高比
• ContentScale.None - 不缩放

使用示例:

// 资源图片
Image(
    painter = painterResource(id = R.drawable.ic_launcher),
    contentDescription = "应用图标",
    modifier = Modifier.size(100.dp),
    contentScale = ContentScale.Crop
)

// 网络图片（使用 Coil）
AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "网络图片",
    modifier = Modifier.size(200.dp),
    contentScale = ContentScale.Crop
)

---

Icon

图标组件。

函数签名:

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)

参数说明:

参数	类型	默认值	说明
imageVector	ImageVector	-	图标向量
contentDescription	String?	-	内容描述
modifier	Modifier	Modifier	修饰符
tint	Color	LocalContentColor.current	着色

使用示例:

Icon(
    imageVector = Icons.Default.Favorite,
    contentDescription = "收藏",
    tint = Color.Red,
    modifier = Modifier.size(24.dp)
)

---

CircularProgressIndicator

圆形进度指示器。

函数签名:

@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    progress: Float = 1f,
    color: Color = MaterialTheme.colorScheme.primary,
    strokeWidth: Dp = 4.dp,
    trackColor: Color = MaterialTheme.colorScheme.surfaceVariant,
    strokeCap: StrokeCap = StrokeCap.Butt
)

参数说明:

参数	类型	默认值	说明
modifier	Modifier	Modifier	修饰符
progress	Float	1f	进度值（0f-1f，1f 表示不确定）
color	Color	MaterialTheme.colorScheme.primary	进度颜色
strokeWidth	Dp	4.dp	线条宽度
trackColor	Color	MaterialTheme.colorScheme.surfaceVariant	轨道颜色
strokeCap	StrokeCap	StrokeCap.Butt	线条端点样式

使用示例:

// 不确定进度
CircularProgressIndicator()

// 确定进度
var progress by remember { mutableStateOf(0.5f) }
CircularProgressIndicator(
    progress = progress,
    modifier = Modifier.size(48.dp),
    strokeWidth = 4.dp
)

---

LinearProgressIndicator

线性进度指示器。

函数签名:

@Composable
fun LinearProgressIndicator(
    modifier: Modifier = Modifier,
    progress: Float = 1f,
    color: Color = MaterialTheme.colorScheme.primary,
    trackColor: Color = MaterialTheme.colorScheme.surfaceVariant,
    strokeCap: StrokeCap = StrokeCap.Butt
)

使用示例:

LinearProgressIndicator(
    progress = 0.5f,
    modifier = Modifier.fillMaxWidth()
)

---

容器组件

Card

卡片容器。

函数签名:

@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    elevation: CardElevation = CardDefaults.cardElevation(),
    border: BorderStroke? = null,
    content: @Composable ColumnScope.() -> Unit
)

参数说明:

参数	类型	默认值	说明
modifier	Modifier	Modifier	修饰符
shape	Shape	CardDefaults.shape	形状
colors	CardColors	CardDefaults.cardColors()	颜色配置
elevation	CardElevation	CardDefaults.cardElevation()	高程
border	BorderStroke?	null	边框
content	@Composable ColumnScope.() -> Unit	-	内容

使用示例:

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    shape = RoundedCornerShape(12.dp),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("卡片标题", style = MaterialTheme.typography.titleLarge)
        Spacer(modifier = Modifier.height(8.dp))
        Text("卡片内容", style = MaterialTheme.typography.bodyMedium)
    }
}

---

OutlinedCard

轮廓卡片。

函数签名:

@Composable
fun OutlinedCard(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
    content: @Composable ColumnScope.() -> Unit
)

使用示例:

OutlinedCard(
    modifier = Modifier.fillMaxWidth()
) {
    Text("轮廓卡片", modifier = Modifier.padding(16.dp))
}

---

Surface

表面容器。

函数签名:

@Composable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit
)

参数说明:

参数	类型	默认值	说明
modifier	Modifier	Modifier	修饰符
shape	Shape	RectangleShape	形状
color	Color	MaterialTheme.colorScheme.surface	颜色
contentColor	Color	contentColorFor(color)	内容颜色
tonalElevation	Dp	0.dp	色调高程
shadowElevation	Dp	0.dp	阴影高程
border	BorderStroke?	null	边框
content	@Composable () -> Unit	-	内容

使用示例:

Surface(
    modifier = Modifier.fillMaxWidth(),
    shape = RoundedCornerShape(8.dp),
    tonalElevation = 2.dp,
    color = MaterialTheme.colorScheme.surface
) {
    Text("表面内容", modifier = Modifier.padding(16.dp))
}

---

Scaffold

脚手架布局（Material Design 标准布局）。

函数签名:

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
)

参数说明:

参数	类型	默认值	说明
modifier	Modifier	Modifier	修饰符
topBar	@Composable () -> Unit	{}	顶部栏
bottomBar	@Composable () -> Unit	{}	底部栏
snackbarHost	@Composable (SnackbarHostState) -> Unit	{ SnackbarHost(it) }	Snackbar 宿主
floatingActionButton	@Composable () -> Unit	{}	浮动操作按钮
floatingActionButtonPosition	FabPosition	FabPosition.End	FAB 位置
containerColor	Color	MaterialTheme.colorScheme.background	容器颜色
contentColor	Color	contentColorFor(containerColor)	内容颜色
contentWindowInsets	WindowInsets	ScaffoldDefaults.contentWindowInsets	内容窗口插入
content	@Composable (PaddingValues) -> Unit	-	内容（接收 PaddingValues）

使用示例:

val snackbarHostState = remember { SnackbarHostState() }

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("标题") }
        )
    },
    bottomBar = {
        NavigationBar {
            // 导航项
        }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { }) {
            Icon(Icons.Default.Add, null)
        }
    },
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    }
) { paddingValues ->
    // 主内容
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
    ) {
        items(items = dataList) { item ->
            ItemCard(item = item)
        }
    }
}

---

修饰符 (Modifier)

尺寸修饰符

修饰符	说明	示例
size(width: Dp, height: Dp)	设置固定尺寸	Modifier.size(100.dp)
size(size: Dp)	设置正方形尺寸	Modifier.size(100.dp)
width(width: Dp)	设置宽度	Modifier.width(200.dp)
height(height: Dp)	设置高度	Modifier.height(100.dp)
fillMaxSize(fraction: Float = 1f)	填充最大尺寸	Modifier.fillMaxSize()
fillMaxWidth(fraction: Float = 1f)	填充最大宽度	Modifier.fillMaxWidth()
fillMaxHeight(fraction: Float = 1f)	填充最大高度	Modifier.fillMaxHeight()
wrapContentSize()	包裹内容尺寸	Modifier.wrapContentSize()
defaultMinSize(minWidth: Dp, minHeight: Dp)	设置最小尺寸	Modifier.defaultMinSize(50.dp)

布局修饰符

修饰符	说明	示例
padding(all: Dp)	所有方向内边距	Modifier.padding(16.dp)
padding(horizontal: Dp, vertical: Dp)	水平和垂直内边距	Modifier.padding(16.dp, 8.dp)
padding(start: Dp, top: Dp, end: Dp, bottom: Dp)	各方向内边距	Modifier.padding(16.dp, 8.dp, 16.dp, 8.dp)
padding(paddingValues: PaddingValues)	使用 PaddingValues	Modifier.padding(PaddingValues(16.dp))
offset(x: Dp, y: Dp)	偏移位置	Modifier.offset(10.dp, 5.dp)
offset(offset: IntOffset)	使用 IntOffset 偏移	Modifier.offset(IntOffset(10, 5))
weight(weight: Float, fill: Boolean = true)	权重（Row/Column 内）	Modifier.weight(1f)
align(alignment: Alignment)	对齐（Box/Column/Row 内）	Modifier.align(Alignment.Center)

背景和边框修饰符

修饰符	说明	示例
background(color: Color, shape: Shape?)	背景颜色	Modifier.background(Color.Blue)
background(brush: Brush, shape: Shape?)	背景渐变	Modifier.background(Brush.horizontalGradient(...))
border(width: Dp, color: Color, shape: Shape?)	边框	Modifier.border(2.dp, Color.Red)
border(width: Dp, brush: Brush, shape: Shape?)	渐变边框	Modifier.border(2.dp, Brush.linearGradient(...))

形状修饰符

修饰符	说明	示例
clip(shape: Shape)	裁剪形状	Modifier.clip(RoundedCornerShape(8.dp))
clipToBounds()	裁剪到边界	Modifier.clipToBounds()

交互修饰符

修饰符	说明	示例
clickable(onClick: () -> Unit)	点击事件	Modifier.clickable { }
clickable(interactionSource, indication, enabled, onClickLabel, role, onClick)	完整点击配置	Modifier.clickable(...)
scrollable(state: ScrollableState, orientation: Orientation)	可滚动	Modifier.scrollable(...)
draggable(state: DraggableState, orientation: Orientation)	可拖拽	Modifier.draggable(...)
swipeable(state: SwipeableState, anchors: Map<Float, T>)	可滑动	Modifier.swipeable(...)

透明度修饰符

修饰符	说明	示例
alpha(alpha: Float)	透明度	Modifier.alpha(0.5f)
graphicsLayer(alpha: Float)	图形层透明度	Modifier.graphicsLayer { alpha = 0.5f }

旋转和缩放修饰符

修饰符	说明	示例
rotate(degrees: Float)	旋转	Modifier.rotate(45f)
scale(scale: Float)	缩放	Modifier.scale(1.5f)
graphicsLayer(rotationZ: Float, scaleX: Float, scaleY: Float)	图形层变换	Modifier.graphicsLayer { rotationZ = 45f }

其他常用修饰符

修饰符	说明	示例
fillMaxSize()	填充父容器	Modifier.fillMaxSize()
fillMaxWidth()	填充宽度	Modifier.fillMaxWidth()
fillMaxHeight()	填充高度	Modifier.fillMaxHeight()
aspectRatio(ratio: Float)	宽高比	Modifier.aspectRatio(16f / 9f)
onGloballyPositioned(onPositioned: (LayoutCoordinates) -> Unit)	位置回调	Modifier.onGloballyPositioned { }
onSizeChanged(onSizeChange: (IntSize) -> Unit)	尺寸变化回调	Modifier.onSizeChanged { }
testTag(tag: String)	测试标签	Modifier.testTag("button")
semantics(properties: SemanticsPropertyReceiver.() -> Unit)	语义属性	Modifier.semantics { }

---

📚 总结

组件选择指南

需求	推荐组件
垂直布局	Column
水平布局	Row
重叠布局	Box
复杂约束布局	ConstraintLayout
垂直列表	LazyColumn
水平列表	LazyRow
网格列表	LazyVerticalGrid
分页视图	HorizontalPager / VerticalPager
文本显示	Text
文本输入	TextField / OutlinedTextField
按钮	Button / TextButton / OutlinedButton
图标	Icon
图片	Image
卡片	Card / OutlinedCard
对话框	Dialog / AlertDialog
进度指示	CircularProgressIndicator / LinearProgressIndicator
标准布局	Scaffold

最佳实践

1. 状态管理: 使用 remember 和 mutableStateOf 管理组件状态
2. 性能优化: 为列表项使用 key() 参数
3. 可访问性: 为图标和图片提供 contentDescription
4. 主题适配: 使用 MaterialTheme.colorScheme 获取主题颜色
5. 响应式设计: 使用 fillMaxWidth() 和 weight() 实现响应式布局
6. 修饰符链: 修饰符按顺序应用，注意顺序影响效果

---

📖 参考资源

• Jetpack Compose 官方文档
• Material Design 3 for Compose
• Compose API 参考
• Compose 示例代码

---