Jetpack Compose Modifier 核心说明
Modifier 是 UI 组件的灵魂,它是一个有序的、不可变的修饰符集合,用于装饰或增强可组合项(Composable)。
1. 核心用法:链式调用
Modifier 采用链式调用,通过 . 将不同的修饰符串联起来。
kotlin
Box(
modifier = Modifier
.size(100.dp) // 设置尺寸
.background(Color.Red) // 设置背景
.padding(16.dp) // 设置内边距
.clickable { /* 点击事件 */ } // 添加交互
)
请谨慎使用此类代码。
2. 顺序决定结果(非常重要!)
由于 Modifier 是按顺序应用的,先写什么后写什么结果完全不同。
- 先 padding 后 background:背景色不包含 padding 区域(类似 margin)。
- 先 background 后 padding:背景色包含 padding 区域。
- 先 clickable 后 padding:点击响应区域仅限内容部分。
3. 常用修饰符分类
| 分类 | 常用函数 | 作用 |
|---|---|---|
| 尺寸与布局 | width, height, size, fillMaxSize | 定义组件宽高 |
| 外观定制 | background, border, clip, alpha | 颜色、边框、圆角、透明度 |
| 间距控制 | padding, offset | 内边距和位置偏移 |
| 用户交互 | clickable, scrollable, draggable | 点击、滚动、拖拽监听 |
| 作用域限定 | weight (Row/Column), align | 仅在特定父容器中生效的功能 |
4. 最佳实践
- 参数传递: 按照 Android 官方最佳实践,应始终为 Composable 函数预留一个 modifier: Modifier = Modifier 参数,并将其应用于该组件的最外层布局。
- 复用修饰符: 如果多个组件共用同一套复杂的 Modifier,可以将其提取为变量以提高代码可读性。
- 性能优化: 避免在频繁重组的函数体中重复创建复杂的 Modifier,必要时可配合 remember 使用。