Jetpack Compose中Modifier方法介绍
前言
在 Compose 中，Modifier 的调用顺序是有影响的。
修饰符列表
https://android-dot-google-developers.gonglchuangl.net/jetpack/compose/modifiers-list?hl=zh-cn
背景
Modifier.background(Color.Green))内外边距和背景
在 Compose 中，背景色使用 Modifier.background() 进行设置。
在 Compose 中，Margin 和 Padding 都用 Modifier.padding() 来设置。
- 没有
background的时候是外边距 - 有
background的时候在background之前的是外边距，在background之后是内边距 pading和background一定要写在height和width前面不然会不起作用
示例:
// 背景色不包括 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: 用于裁剪组件的内容，以匹配指定的形状。
Modifier.clip(shape = CircleShape)注意
它不会裁剪背景。 它会剪裁可点击项的涟漪效果的遮罩背景。
背景裁剪：只能通过设置背景形状实现。
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: 用于向组件添加边框。
Modifier.border(width = 2.dp, color = Color.Black)透明度
Modifier.alpha(0.5f)尺寸设置
固定大小
layout_width & layout_height => Modifier.size() or (Modifier.width() & Modifier.height())
size: 用于设置组件的固定大小。
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。
Box(
modifier = Modifier
.size(100.dp)
.background(Color.Red)
) {
Box(
modifier = Modifier
.size(50.dp)
.background(Color.Blue)
.align(Alignment.Center)
) {
// Content
}
}Column中使用：
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: 用于将组件从其默认位置移动指定的偏移量。
Modifier.offset(x = 20.dp, y = 20.dp)事件
clickable: 用于使组件可点击，并指定点击事件的处理程序。
Modifier.clickable(onClick = { /* 点击事件处理 */ })pointerInput: 用于处理指针输入事件，例如触摸或鼠标事件。
Modifier.pointerInput { /* 处理指针输入事件的逻辑 */ }文字大小
文字大小使用函数参数(fontSize)设置，而不是 Modifier