前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Compose_Modifier 修饰符的常见使用

Compose_Modifier 修饰符的常见使用

作者头像
mikimo
发布2024-07-21 08:14:19
430
发布2024-07-21 08:14:19
举报
文章被收录于专栏:iOS开发~

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-07-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.尺寸
    • 1.1.weight
      • 1.2.padding
      • 2.位置
      • 3.样式
      • 4.背景色
      • 5.点击
      • 6.滚动
      • 7.then
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档