Skip to content

修饰符 (Modifiers)

源:Compose 修饰符

修饰符 (Modifiers) 允许您修饰或扩充可组合项。

1. 基础原则

修饰符可以做什么?

  • 更改组件的大小、布局、行为和外观。
  • 添加交互,如点击、滚动、拖拽。
  • 添加辅助功能信息(无障碍)。

2. 顺序的重要性 (极其重要)

修饰符是链式调用的,执行顺序会直接影响最终结果。

kotlin
// 背景只覆盖内容部分
Modifier
    .padding(16.dp)
    .background(Color.Red)
kotlin
// 整个区域(包括间距)都是红色的
Modifier
    .background(Color.Red)
    .padding(16.dp)
kotlin
// 点击效果(Ripple)只在背景区域内
Modifier
    .background(Color.Gray)
    .clickable { }
    .padding(16.dp)

// 点击效果覆盖整个 padding 区域
Modifier
    .clickable { }
    .background(Color.Gray)
    .padding(16.dp)

3. 常用修饰符分类

分类常用方法
尺寸fillMaxSize(), size(), width(), height(), weight()
间距padding(), offset()
外观background(), border(), clip(), shadow(), alpha()
交互clickable(), draggable(), scrollable(), pointerInput()

4. 作用域限定修饰符 (Scope-specific Modifiers)

有些修饰符只能在特定的父布局作用域中使用。这是利用 Kotlin 的“带接收者的扩展函数”实现的。

  • RowScope: weight(), align(Alignment.CenterVertically)
  • ColumnScope: weight(), align(Alignment.CenterHorizontally)
  • BoxScope: align(Alignment.Center)

编译错误

如果你在 Box 内部尝试调用 .weight(1f),编译器会报错,因为 BoxScope 没有提供这个修饰符。这是 Compose 利用类型系统防止布局错误的精妙设计。

5. 最佳实践:修饰符透传

为了让组件更具扩展性,自定义 Composable 应该接受一个 modifier 参数,并将其应用于根布局。

kotlin
@Composable
fun MyCustomComponent(
    modifier: Modifier = Modifier, // 默认空修饰符
    content: String
) {
    Box(modifier = modifier) { // 应用于根
        Text(text = content)
    }
}