Compose_Modifier 修饰符的常见使用

1.尺寸

代码语言：javascript复制

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，分别如下：

代码语言：javascript复制

Row(modifier = Modifier.width(150.dp)) {
	Image(modifier = Modifier.weight(1f))
	Text(modifier = Modifier.weight(2f))
}

则 Image 的宽度为 50， Text 的宽度为 100。

1.2.padding

代码语言：javascript复制

Modifier
	.padding(10.dp)
	.padding(start = 2.dp, top = 2.dp, end = 2.dp, end = 2.dp)

padding 跟 size 先后顺序：

代码语言：javascript复制

Modifier
	.padding(10.dp) // 外边距
	.size(100.dp)
	.padding(10.dp) // 内边距

padding 跟 backgroundColor 先后顺序：

代码语言：javascript复制

Modifier
	.background(color = Color.Red) // 整个视图的背景色 
	.padding(10.dp)
	.background(color = Color.Blue) // 减掉内边距后填充的背景色

Modifier 的点语法可以看做是一层一层叠加的效果，每个点语法都是在当前的状态下进行加工，将加工后的结果传递给下一个点语法。

---

2.位置

代码语言：javascript复制

Modifier
	.offset(x = 2.dp, y = 2.dp) // x轴和y轴的偏移量
	.absoluteOffset(x,y) // 绝对偏移，不考虑布局方向

---

3.样式

代码语言：javascript复制

Modifier
	.alpha(0.5f) // 不透明度
	.clip(shape = RoundedCornerShape(8.dp))	// 圆角
	.clipToBounds() // 裁剪超出内容
	.border(width = 2.dp, color = Color.Red, shap = RoundedCornerShape(8.dp)) // 边框
	.shadow() // 阴影
	.rotate(90f) // 旋转角度，中心为锚点

---

4.背景色

代码语言：javascript复制

.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.点击

代码语言：javascript复制

.clickable { // 默认带点击效果
	enabled = true,
	onClick = { /* todo */}
}
// 去掉点击效果
.clickable(onClick = {
	// ...
}, indication = null, interactionSource = remember {
	MutableInteractionSource()
})

---

6.滚动

代码语言：javascript复制

.horizontalScroll( // 横向滚动
	state = rememberScrollState(),
	enabled = true
)
.verticalScroll( // 竖向滚动
	state = rememberScrollState(),
	enabled = true
)
.scrollable(
	state = rememberScrollState(),
	orientation = Orientation.Horizontal,
)

---

7.then

根据条件添加设置

代码语言：javascript复制

Modifier
	.then (
		if (on) 
			Modifier.background(color = Color.Red)
		else 
			Modifier
	)

---

参考： modifiers-list

语法 background dp padding 布局

0 人点赞