初识 Jetpack Compose(三) :修饰符(Modifier)

Modifier



modifier elements装饰或添加行为到 Compose UI 元素的有序的、不可变的集合。例如,背景、填充和单击事件侦听器装饰行、文本或按钮或向其添加行为。



正如其名,modifier主要为Compose组件提供修饰功能,包括但不限于 样式修改事件监听等一系列对Compose组件的装饰。


有序的


需要注意官方描述的“有序的”一词,由于Modifier的使用方式是链式的,所以属性定义的先后顺序会影响到UI的展示效果。
比如:


@Composable
fun RoundButton() {
Box(
modifier = Modifier
.width(300.dp)
.height(90.dp)
.background(Color(0xFF3ADF00), shape = RoundedCornerShape(50))
.padding(20.dp),
contentAlignment = Alignment.Center){
Text(text = "RoundButton",color = Color.White)
}
}

由于backgroundpadding前,所以Modifier会先给Box设置背景,然后再设置边距,如图:
1630476697(1).jpg
同理,将backgroundpadding顺序替换,效果则如下:


1630477241(1).jpg


通过查看Modifier的源码实现可以发现,在我们通过链式点点点叠加属性的过程中,Modifier会创建一个CombinedModifier将旧的和新的属性组合在一起,合成一个单独的Modifier,相当于给被修饰的组件套上了一层又一层的Modifier,这也是Modifier为有序的原因。


可拓展的


Modifier.padding()源码为例:


@Stable
fun Modifier.padding(all: Dp) =
this.then(
PaddingModifier(
start = all,
top = all,
end = all,
bottom = all,
rtlAware = true,
inspectorInfo = debugInspectorInfo {
name = "padding"
value = all
}
)
)

可以发现,padding()Modifier的一个拓展函数,它调用了Modifier的 then() 函数,而这个 then() 需要接收一个Modifier对象,而PaddingModifier就是这个对象。


所以我们也当然可以为Modifier添加拓展函数,传入我们自定义的Modifier来达到一些特定的效果,比如以下这些属性我们会经常为不同的组件配置:


modifier = Modifier
.width(300.dp)
.height(90.dp)
.padding(20.dp)
.background(Color(0xFF3ADF00), RoundedCornerShape(50))
复制代码

为了方便调用,我们可以给Modifier添加一个拓展方法:


@Stable
fun Modifier.buttonDefault() = this.then(
width(300.dp)
.height(90.dp)
.padding(20.dp)
.background(Color(0xFF3ADF00), RoundedCornerShape(50))
)

这样在组件中,我们只需要这样使用就可以了。


modifier = Modifier.buttonDefault()
复制代码

Modifier 属性


Modifier可配置的属性多且杂,这里不一一列举了,具体可前往Andrid Developer查看




以下是根据职能分类列出的一些常用属性


宽&高



























































属性名含义
Modifier.width(width: Dp)设置自身的宽度,单位dp
Modifier.fillMaxWidth(fraction: Float = 1f)默认横向填充满父容器的宽度,参数可以控制宽度的比例。例如0.5就是当前元素占父元素宽度的一半
Modifier.wrapContentWidth(align: Alignment.Horizontal = Alignment.CenterHorizontally, unbounded: Boolean = false)根据子级元素的宽度来确定自身的宽度,如果自身设置了最小宽度的话则会被忽略。当unbounded参数为true的时候,自身设置了最大宽度的话也会被忽略
-----------------------------------------------------------------------------
Modifier.height(height: Dp)设置自身的高度,单位dp
Modifier.fillMaxHeight(fraction: Float = 1f)默认纵向填充满父容器的宽度,参数可以控制宽度的比例。例如0.5就是当前元素占父元素高度的一半
Modifier.wrapContentHeight(align: Alignment.Vertical = Alignment.CenterVertically, unbounded: Boolean = false)根据子级元素的高度来确定自身的高度,如果自身设置了最小高度的话则会被忽略。当unbounded参数为true的时候,自身设置了最大高度的话也会被忽略
-----------------------------------------------------------------------------
Modifier.size(size: Dp)设置自的宽高,单位dp
Modifier.size(width: Dp, height: Dp)设置自的宽高,单位dp
Modifier.fillMaxSize(fraction: Float = 1f)默认填充满父容器,参数可以控制比例。例如0.5就是当前元素占父元素的一半
Modifier.wrapContentSize(align: Alignment = Alignment.Center, unbounded: Boolean = false)根据子级元素的宽高来确定自身的宽高,如果自身设置了最小宽高的话则会被忽略。当unbounded参数为true的时候,自身设置了最大宽高的话也会被忽略

间距



























属性名含义
Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)分别在四个方向上设置填充
Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp)分别在横向和纵向上设置填充
Modifier.padding(all: Dp)统一设置所有方向上的填充
Modifier.padding(padding: PaddingValues)根据参数PaddingValues来设置填充,PaddingValues参数可以理解为以上三种方式的封装

绘制



































属性名含义
Modifier.alpha(alpha: Float)不透明度,范围从0-1
Modifier.clip(shape: Shape)裁剪为相应的形状,例如shape = RoundedCornerShape(20) 表示裁剪为20%圆角的矩形。
Modifier.shadow(elevation: Dp, shape: Shape = RectangleShape, clip: Boolean = elevation > 0.dp)绘制阴影效果
Modifier.rotate(degrees: Float)设置视图围绕其中心旋转的角度
Modifier.scale(scale: Float)设置视图的缩放比例
Modifier.scale(scaleX: Float, scaleY: Float)设置视图的缩放比例

背景&边框































属性名含义
Modifier.background(color: Color, shape: Shape = RectangleShape)设置背景色
Modifier.background(brush: Brush, shape: Shape = RectangleShape, alpha: Float = 1.0f)使用Brush来设置背景色,例如渐变色效果
Modifier.border(border: BorderStroke, shape: Shape = RectangleShape)绘制指定形状的边框
Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape)绘制指定宽度、颜色、形状的边框
Modifier.border(width: Dp, brush: Brush, shape: Shape)绘制指定宽度、brush、形状的边框

行为



























属性名含义
Modifier.clickable(  enabled: Boolean = true, onClickLabel: String? = null, role: Role? =null,  onClick: () -> Unit)点击事件
Modifier.combinedClickable( enabled: Boolean = true,onClickLabel: String? = null,role: Role? = null,onLongClickLabel: String? = null,onLongClick: () -> Unit = null,onDoubleClick: () -> Unit = null,onClick: () -> Unit)组合点击事件,包括单击、长按、双击
Modifier.horizontalScroll(state: ScrollState, enabled: Boolean = true, reverseScrolling: Boolean = false)使组件支持横向滚动模式
Modifier.verticalScroll(state: ScrollState, enabled: Boolean = true, reverseScrolling: Boolean = false)使组件支持纵向滚动模式

二、最后


好记性不如烂笔头,初识 Jetpack Compose 系列是我自己的学习笔记,在加深知识巩固的同时,也可以锻炼一下写作技能。文章中的内容仅作参考,如有问题请留言指正。


1. 参考



作者:LOPER7
链接:https://juejin.cn/post/7002904038001868830
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0 个评论

要回复文章请先登录注册