Android Jetpack Compose Modifier除了有padding还有哪些常用方法

最新推荐文章于 2025-06-30 16:50:24 发布

原创最新推荐文章于 2025-06-30 16:50:24 发布 · 665 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#android jetpack #android

Modifier 是 Jetpack Compose 中一个强大的工具，用于描述和修改 UI 组件的布局、外观和行为。以下是一些常用的 Modifier 方法：

布局相关的 Modifier

fillMaxSize()：使组件填满父布局的最大宽度和高度。
```
Modifier.fillMaxSize()
```
fillMaxWidth(fraction: Float = 1f)：使组件填满父布局的最大宽度，可以通过 fraction 参数指定填充的比例。
```
Modifier.fillMaxWidth()
```
fillMaxHeight(fraction: Float = 1f)：使组件填满父布局的最大高度，可以通过 fraction 参数指定填充的比例。
```
Modifier.fillMaxHeight()
```
wrapContentWidth(align: Alignment.Horizontal = Alignment.CenterHorizontally)：使组件宽度包裹其内容，可以指定对齐方式。
```
Modifier.wrapContentWidth()
```
wrapContentHeight(align: Alignment.Vertical = Alignment.CenterVertically)：使组件高度包裹其内容，可以指定对齐方式。
```
Modifier.wrapContentHeight()
```
size(width: Dp, height: Dp)：设置组件的宽度和高度。
```
Modifier.size(100.dp, 50.dp)
```
width(width: Dp)：设置组件的宽度。
```
Modifier.width(100.dp)
```
height(height: Dp)：设置组件的高度。
```
Modifier.height(50.dp)
```

外观相关的 Modifier

background(color: Color, shape: Shape = RectangleShape)：设置组件的背景颜色和形状。
```
Modifier.background(Color.Red)
```
border(width: Dp, color: Color, shape: Shape = RectangleShape)：给组件添加边框。
```
Modifier.border(2.dp, Color.Black)
```
clip(shape: Shape)：裁剪组件的形状。
```
Modifier.clip(RoundedCornerShape(8.dp))
```

布局偏移和对齐

offset(x: Dp = 0.dp, y: Dp = 0.dp)：设置组件的偏移量。
```
Modifier.offset(10.dp, 20.dp)
```
align(alignment: Alignment)：在父布局中对齐组件。
```
Modifier.align(Alignment.Center)
```

交互相关的 Modifier

clickable(onClick: () -> Unit)：使组件可点击，并执行指定的点击操作。
```
Modifier.clickable { /* 执行点击操作 */ }
```
draggable(state: DraggableState, orientation: Orientation)：使组件可以拖动。
```
Modifier.draggable(/* state and orientation */)
```
scrollable(state: ScrollableState, orientation: Orientation)：使组件可以滚动。
```
Modifier.scrollable(/* state and orientation */)
```

其他常用 Modifier

padding(all: Dp)：设置组件的内边距。
```
Modifier.padding(16.dp)
```
padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)：分别设置组件的四个方向的内边距。
```
Modifier.padding(start = 8.dp, top = 16.dp, end = 8.dp, bottom = 16.dp)
```
aspectRatio(ratio: Float, matchHeightConstraintsFirst: Boolean = false)：设置组件的宽高比。
```
Modifier.aspectRatio(1f)
```
weight(weight: Float, fill: Boolean = true)：在 Row 或 Column 中使用，按比例分配剩余空间。
```
Modifier.weight(1f)
```
zIndex(zIndex: Float)：设置组件的堆叠顺序。
```
Modifier.zIndex(1f)
```

示例

下面是一个综合示例，展示如何使用上述 Modifier 方法来构建一个简单的界面：

@Composable
fun MyScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
            .background(Color.White)
    ) {
        Text(
            text = "Hello, World!",
            modifier = Modifier
                .padding(8.dp)
                .background(Color.Gray)
                .clickable { /* 点击事件 */ }
        )
        Box(
            modifier = Modifier
                .size(100.dp)
                .padding(16.dp)
                .background(Color.Blue)
                .align(Alignment.CenterHorizontally)
        )
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
        ) {
            Text(
                text = "Left",
                modifier = Modifier.weight(1f)
            )
            Text(
                text = "Right",
                modifier = Modifier.weight(1f)
            )
        }
    }
}