Jetpack Compose修饰符专项精讲

本篇开始介绍Jetpack Compose 中的修饰符Modifier。修饰符可以用来执行以下操作：

• 更改可组合项的大小、布局、行为和外观。

• 添加信息，如无障碍标签。

• 处理用户输入。

• 添加高级互动，如使元素可点击、可滚动、可拖动或可缩放。

1.常用修饰符

下面先介绍一些常用的方法：

• alpha(alpha: Float)：设置透明度，范围0到1。

• background(color: Color, shape: Shape?)：设置背景色，shape可以指定形状，例如可以使用RoundedCornerShape来指定圆角大小。

• 对于背景是渐变的，可以使用background(brush: Brush, shape: Shape?, alpha: Float?)。其中Brush就是我们指定渐变，例如使用horizontalGradient创建水平方向渐变：

Box(Modifier.background(
       Brush.horizontalGradient(
           listOf(Color.Red, Color.Green)
       )
   ).size(100.dp))

当然，还可以指定开始结束的位置，颜色的分散偏移量，这里就不多说了。

• Modifier.border(width: Dp, color: Color, shape: Shape?)，添加边框，可以指定颜色、粗细和形状。

• Modifier.clickable()，添加点击事件。参数如下：

Modifier.clickable(
   enabled: Boolean = true, // 是否可点击状态，默认可点击
   onClickLabel: String? = null, // 语义/可访问性标签
   role: Role? = null, // 点击元素的类型，例如Button、Checkbox、Image等。用于可访问 * 。
   onClick: () -> Unit // 点击事件
)

如果不考虑Android TalkBack 读屏这类功能，一般情况下使用就是Modifier.clickable { }

• Modifier.combinedClickable()与上面的点击事件一样，只是它还支持长按，双击事件。

• Modifier.onFocusChanged()，监听焦点变化事件。

• Modifier.focusable()，设置焦点。

• Modifier.height(height: Dp)，设置高度，同理width设置宽度。

• Modifier.requiredHeight(height: Dp)，强制设置高度，可以忽略父元素的宽高限制。requiredWidth同理。举一个小例子：

Box(Modifier.requiredSize(100.dp)
       .background(Color.Red)
   ) {
       Box(Modifier.width(50.dp)
           .height(150.dp)
           .background(Color.Blue)
       )
   }

一个100dp100dp的红色方块内有个50dp150dp的蓝色方块。如果我们把height换为requiredHeight。

Box(Modifier.requiredSize(100.dp)
       .background(Color.Red)
   ) {
       Box(Modifier.width(50.dp)
           .requiredHeight(150.dp)
           .background(Color.Blue)
       )
   }

对比一下前后效果，一目了然。

• Modifier.heightIn(min: Dp, max: Dp )，设置高度的最大最小值。widthIn同理。

• Modifier.size(size: Dp)，可同时设置宽高。requiredSize、sizeIn与上面的同理。

• Modifier.padding(all: Dp)，元素的边添加间隔，也就是常说的内间距。

• Modifier.rotate(degrees: Float)，设置旋转度数。

• Modifier.scale(scaleX: Float, scaleY: Float)，设置缩放，如果是负数可以实现镜像效果。

• Modifier.horizontalScroll()，允许子元素在宽度大于最大限制时垂直滚动。例如我们给Row添加它，这样在超出屏幕宽度后，我们就可以水平方向滚动了。verticalScroll同理。

Row(Modifier.horizontalScroll(rememberScrollState())) {
Box(
Modifier.size(5000.dp, 100.dp)
      .background(Color.Blue)
   )
}

Modifier.fillMaxHeight(fraction: Float = 1f)，高度上填充满父元素，参数fraction指填充的比例。fillMaxWidth，fillMaxSize同理。示例：

Box(Modifier.requiredSize(100.dp).background(Color.Blue)) {
       Box(
           Modifier.fillMaxWidth(0.8f)
               .fillMaxHeight(0.5f)
               .background(color = Color.Yellow)
       )
   }

效果如下：

Modifier.wrapContentSize(align: Alignment?, unbounded: Boolean?)，看这个名字，相信你就会联想起wrap_content，它允许内容以其所需的大小进行测量，会忽略最小宽度或最小高度的约束。如果unbounded为true，也会忽略最大宽高的约束，默认为false。align是指定子元素相对父元素的对齐方式，默认居中。

看个例子：

Box(Modifier.requiredSize(200.dp).background(Color.Blue)) {
       Box(
           Modifier.sizeIn(minWidth = 140.dp, minHeight = 140.dp)
               .wrapContentSize(Alignment.TopStart)
               .size(70.dp)
               .background(Color.Yellow)
       )
   }

外层是个200dp*200dp的蓝色方块，内部是最小宽高140dp的黄色方块。由于设置了wrapContentSize，此时size(70.dp)就生效了，成为了70dp的黄色方块。下图是使用wrapContentSize前后的对比图。

同样的例子，我们看一下unbounded属性的作用。外层是个200dp*200dp的蓝色方块，内部是最大宽高140dp的黄色方块。现在我们设置size为170dp

Box(Modifier.requiredSize(200.dp).background(Color.Blue)) {
       Box(
           Modifier.sizeIn(maxWidth = 140.dp, maxHeight = 140.dp)
               .wrapContentSize(Alignment.TopStart, true)
               .size(170.dp)
               .background(Color.Yellow)
       )
   }

下图分别是unbounded为true和false的效果图：

2.修饰符顺序

修饰符函数的顺序非常重要。每个函数都会对上一个函数返回的 Modifier 进行更改。

上面介绍了一些常用的修饰符，不知道你有没有注意到，有提到padding，为啥没见margin？其实就是因为修饰符的顺序，不同的顺序会实现padding和margin效果。这块我就直接照搬文档的例子了，很直观。

@Composable
fun ArtistCard(/*...*/) {
   val padding = 16.dp
   Column(
       Modifier
           .clickable(onClick = onClick)
           .padding(padding)
           .fillMaxWidth()
   ) {
       // rest of the implementation
   }
}

先clickable后padding：

可以看到点击范围就是整个卡片，然后卡片的内容四周有16dp的间隔，实现的效果就是padding。

如果先padding后clickable：

@Composable
fun ArtistCard(/*...*/) {
   val padding = 16.dp
   Column(
       Modifier
           .padding(padding)
           .clickable(onClick = onClick)
           .fillMaxWidth()
   ) {
       // rest of the implementation
   }
}

效果如下：

可以看到效果就是margin。

再举一个例子，就是我们上面说到的wrapContentSize。注意我们当时的使用顺序：

Box(Modifier.requiredSize(200.dp).background(Color.Blue)) {
       Box(
           Modifier.sizeIn(minWidth = 140.dp, minHeight = 140.dp)
               .wrapContentSize(Alignment.TopStart)
               .size(70.dp)
               .background(Color.Yellow)
       )
   }

如果wrapContentSize和size顺序反过来，那就不会显示黄色的方块了，因为首先它忽略了之前设置的最小宽高，然后内容大小后面没有设置了，所以就看不到了。记住开始的那句话，每个修饰符函数都会对上一个函数返回的 Modifier 进行更改。

所以在实际的使用中，不仅需要了解修饰符的作用，同样需要注意修饰符的顺序。

那么到这里有关修饰符的部分就完了，下一篇就是常用组件的介绍。如果本篇对你有帮助，希望点个赞支持一下~

参考： 官方文档 - 修饰符

来源：https://weilu.blog.csdn.net/article/details/122534048