Jetpack Compose中Modifier方法介绍

发表于 | 分类于
Jetpack Compose中Modifier方法介绍

前言

在 Compose 中，Modifier 的调用顺序是有影响的。

修饰符列表

https://android-dot-google-developers.gonglchuangl.net/jetpack/compose/modifiers-list?hl=zh-cn

背景

1
Modifier.background(Color.Green))

内外边距和背景

在 Compose 中，背景色使用 Modifier.background() 进行设置。

在 Compose 中，Margin 和 Padding 都用 Modifier.padding() 来设置。

  • 没有background的时候是外边距
  • 有background的时候在background之前的是外边距，在background之后是内边距
  • pading和background一定要写在height和width前面不然会不起作用

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 背景色不包括 padding 的部分，效果类似 margin
Text(text = "Compose 学习", modifier = Modifier
    .padding(8.dp)
    .background(Color.Green))

// 背景色包括 padding 的部分，效果类似 padding
Text(text = "Compose 学习", modifier = Modifier
    .background(Color.Green)
    .padding(8.dp))

// 同时设置了 padding 和 margin 的效果
Text(
    text = "Compose 学习", modifier = Modifier
        .padding(8.dp)
        .background(Color.Green)
        .padding(8.dp)
)

background 还可以传入 shape 参数，来设置不同的背景形状。

Shape 对象也是一个通用的能力，例如，可以用于 clip 当中，进行裁切。

裁剪

clip: 用于裁剪组件的内容，以匹配指定的形状。

1
Modifier.clip(shape = CircleShape)

注意

它不会裁剪背景。

它会剪裁可点击项的涟漪效果的遮罩背景。

背景裁剪：只能通过设置背景形状实现。

1
2
3
4
5
6
7
Modifier
    .padding(20.dp)
    .fillMaxWidth()
    .background(Color.White.copy(0.5f),RoundedCornerShape(16.dp))
    .border(1.dp, Color.White, RoundedCornerShape(16.dp))
    .clip(RoundedCornerShape(16.dp))
    .padding(20.dp)

边框

border: 用于向组件添加边框。

1
Modifier.border(width = 2.dp, color = Color.Black)

透明度

1
Modifier.alpha(0.5f)

尺寸设置

固定大小

layout_width & layout_height => Modifier.size() or (Modifier.width() & Modifier.height())

size: 用于设置组件的固定大小。

1
2
3
Modifier.size(width = 100.dp, height = 100.dp)

Modifier.size(100.dp)

自身大小

默认是 wrap_content

适配父大小

match_parent => Modifier.fillMaxWidth() or Modifier.fillMaxHeight()

对齐

align: 用于指定组件在其父容器中的对齐方式。

align 方法用于指定组件在其父容器中的对齐方式。它适用于容器类组件，如 Box、Column、Row 等，以及具有布局属性的组件，如 BoxWithConstraints。

align 方法生效的情况取决于父容器的布局方式。通常情况下，父容器需要使用相应的布局修饰符，如 Box 中的 BoxScope、Column 中的 ColumnScope 或 Row 中的 RowScope。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
) {
    Box(
        modifier = Modifier
            .size(50.dp)
            .background(Color.Blue)
            .align(Alignment.Center)
    ) {
        // Content
    }
}

Column中使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Column(
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Box(
        modifier = Modifier
            .size(50.dp)
            .background(Color.Blue)
            .align(Alignment.CenterHorizontally)
    ) {
        // Content
    }
}

位置

offset: 用于将组件从其默认位置移动指定的偏移量。

1
Modifier.offset(x = 20.dp, y = 20.dp)

事件

clickable: 用于使组件可点击，并指定点击事件的处理程序。

1
Modifier.clickable(onClick = { /* 点击事件处理 */ })

pointerInput: 用于处理指针输入事件，例如触摸或鼠标事件。

1
Modifier.pointerInput { /* 处理指针输入事件的逻辑 */ }

文字大小

文字大小使用函数参数(fontSize)设置，而不是 Modifier