文章目录
1.尺寸
Modifier
.fillMaxSize() // 撑满
.fillMaxWidth() // 宽度撑满
.fillMaxHeight() // 高度撑满
.fillMaxWidth(0.5) // 宽度为最大宽度的比例
.fillMaxHeight(0.5) // 高度为最大高度的比例
.wrapContentSize() // 自适应尺寸
.wrapContentWidth() // 自适应宽度
.wrapContentHeight() // 自适应高度
.size(width = 20.dp, height = 20.dp) // 固定尺寸
.width(160.dp) // 固定宽
.height(160.dp) // 固定高
.sizeIn( // 限制尺寸范围
minWidth = 100,
maxWidth = 200,
minHeight = 100,
maxHeight = 200,
)
// 强制尺寸,哪怕超出父视图尺寸
.requiredSize(100.dp, 100.dp)
.requiredHeight(10.dp)
.requiredWidth(10.dp)
.requiredSizeIn( // 限制尺寸范围
minWidth = 100,
maxWidth = 200,
minHeight = 100,
maxHeight = 200,
)
.scale(0.5f) // 缩放比例
.onSizeChanged( it: IntSize
// 首次测量元素时或元素的大小发生变化时的回调
)
1.1.weight
weight 权重,例如:Row里有两个box,分别如下:
Row(modifier = Modifier.width(150.dp)) {
Image(modifier = Modifier.weight(1f))
Text(modifier = Modifier.weight(2f))
}
则 Image 的宽度为 50, Text 的宽度为 100。
1.2.padding
Modifier
.padding(10.dp)
.padding(start = 2.dp, top = 2.dp, end = 2.dp, end = 2.dp)
padding 跟 size 先后顺序:
Modifier
.padding(10.dp) // 外边距
.size(100.dp)
.padding(10.dp) // 内边距
padding 跟 backgroundColor 先后顺序:
Modifier
.background(color = Color.Red) // 整个视图的背景色
.padding(10.dp)
.background(color = Color.Blue) // 减掉内边距后填充的背景色
Modifier
的点语法可以看做是一层一层叠加的效果,每个点语法都是在当前的状态下进行加工,将加工后的结果传递给下一个点语法。
2.位置
Modifier
.offset(x = 2.dp, y = 2.dp) // x轴和y轴的偏移量
.absoluteOffset(x,y) // 绝对偏移,不考虑布局方向
.rotate(90f) // 旋转角度,中心为锚点
3.样式
Modifier
.alpha(0.5f) // 不透明度
.clip(shape = RoundedCornerShape(8.dp)) // 圆角
.clipToBounds() // 裁剪超出内容
.border(width = 2.dp, color = Color.Red, shap = RoundedCornerShape(8.dp)) // 边框
.shadow() // 阴影
4.背景色
.background(color = Color.White) // 整个视图的背景色
.padding(20.dp) // 内边距
.background(color = Color.White) // 减去 padding 的背景色
.background(color = Color.White, shape = RoundedCornerShape(8.dp)) // 背景色带圆角
.background(
Brush.verticalGradient( // 渐变背景色
listOf(
Color.Black.copy(alpha = 0.8f),
Color.Black.copy(alpha = 0.32f),
Color.Black.copy(alpha = 0f),
)
)
)
)
5.点击
.clickable { // 默认带点击效果
enabled = true,
onClick = { /* todo */}
}
// 去掉点击效果
.clickable(onClick = {
// ...
}, indication = null, interactionSource = remember {
MutableInteractionSource()
})
6.滚动
.horizontalScroll( // 横向滚动
state = rememberScrollState(),
enabled = true
)
.verticalScroll( // 竖向滚动
state = rememberScrollState(),
enabled = true
)
.scrollable(
state = rememberScrollState(),
orientation = Orientation.Horizontal,
)
7.then
根据条件添加设置
Modifier
.then (
if (on)
Modifier.background(color = Color.Red)
else
Modifier
)
参考:
modifiers-list