Jetpack Compose – Modifier(基础)

介绍

Modifier是一个装饰或者添加行为的有序的，不变的集合，例如background、padding 、宽高、焦点点击事件等。或者给Text设置单行、给Button设置各种点击状态等行为。其实就是所有控件的通用属性都在Modifier中。

基础属性一览

Modifier中属性非常多，学完了Modifier，Compose就学了一半了，官方文档查看[Compose Modifier相关文档]

• Modifier.height(height: Dp)

设置自身的高度，单位dp，值可以被覆盖

• Modifier.height(intrinsicSize: IntrinsicSize)

类似于layout_height="wrap_content"

• Modifier.heightIn(min: Dp, max: Dp)

min等价于minHeight，max等价于maxHeight，不设置max，效果等价于layout_height="match_parent"

• Modifier.width(width: Dp)

设置自身的宽度度，单位dp，值可以被覆盖

• Modifier.width(intrinsicSize: IntrinsicSize)

类似于layout_width="wrap_content"

• Modifier.widthIn(min: Dp, max: Dp)

min等价于minWidth，max等价于maxWidth，不设置max，效果等价于layout_Width="match_parent"

• Modifier.fillMaxHeight(fraction: Float)

layout_height="match_parent"fraction 百分比

• Modifier.fillMaxWidth(fraction: Float)

layout_width="match_parent"fraction 百分比

• Modifier.fillMaxSize(fraction: Float)

fillMaxHeight+fillMaxWidthfraction 百分比

• Modifier.size(size: Dp)

设置宽高 width=height=size

• Modifier.size(width: Dp, height: Dp)

设置宽高

• Modifier.sizeIn(minWidth: Dp, minHeight: Dp, maxWidth: Dp, maxHeight: Dp)

Modifier.heightIn,Modifier.widthIn的组合使用

• Modifier.defaultMinSize(minWidth: Dp, minHeight: Dp)

设置最小宽高等价于.sizeIn(minWidth: Dp, minHeight: Dp)

• Modifier.shadow(elevation: Dp, shape: Shape, clip: Boolean)

设置阴影，阴影大小，形状，是否裁剪clip = elevation>0

• Modifier.wrapContentHeight(align: Alignment.Vertical,unbounded: Boolean)

设置高度自适应，align 设置对其方式（默认纵向居中）,unbounded设置是否可以“无界”，true可以超越父布局高度，可以从下图看出越界效果

• Modifier.wrapContentWidth(align: Alignment.Horizontal,unbounded: Boolean)

设置宽度自适应，align 设置对其方式（默认横向居中）,unbounded设置是否可以“无界”，true可以超越父布局宽度

• Modifier.wrapContentSize(align: Alignment, unbounded: Boolean)

设置宽高自适应，align 设置对其方式（默认居中）,unbounded设置是否可以“无界”，true可以超越父布局大小

• Modifier.paddingFrom(alignmentLine: AlignmentLine, before: Dp, after: Dp)

alignmentLine 为 FirstBaseline，LastBaseline，before为表示文本第一行/最后一行 Baseline的位置距离父级 top/start 的距离，after为表示文本第一行/最后一行 Baseline的位置距离父级 bottom/end 的距离

• Modifier.paddingFrom(alignmentLine: AlignmentLine,before: TextUnit,after: TextUnit)

同上，before，after可以设置TextUnit，例如sp

• Modifier.paddingFromBaseline(top: Dp, bottom: Dp)

top对应FirstBaseline，buttom对应LastBaseline

• Modifier.paddingFromBaseline(top: TextUnit, bottom: TextUnit)

同上top，bttom可以设置TextUnit，例如sp

• Modifier.alpha(alpha: Float)

设置透明度alpha

• Modifier.clip(shape: Shape)

设置切角shape

• Modifier.clipToBounds()

按照指定的边界裁切内容, 类似Android中的子View内容不超过父View

• Modifier.background(color: Color, shape: Shape)

设置背景色Color，切角shape

• Modifier.background(brush: Brush, shape: Shape, alpha: Float)

设置填充色（渐变）brush，切角shape，透明度alpha

• Modifier.border(width: Dp, color: Color, shape: Shape)

设置设置边框宽度width，颜色color，边框形状shape

• Modifier.border(width: Dp, brush: Brush, shape: Shape)

设置设置边框宽度width，边框填充色（渐变）brush，边框形状shape

• Modifier.border(border: BorderStroke, shape: Shape)

BorderStroke(val width: Dp, val brush: Brush)同上

• Modifier.clickable(interactionSource:MutableInteractionSource,
  indication: Indication?,
  enabled: Boolean,onClickLabel: String?,role: Role?,
  onClick: () -> Unit)

设置点击事件onClick，interactionSource交互事件（可自定义），enabled是否可以点击，role 用户界面元素的类型配合interactionSource实现自定义交互事件处理，onClickLabel 无障碍描述

• Modifier.combinedClickable(interactionSource: MutableInteractionSource,
  indication: Indication?,enabled: Boolean,onClickLabel: String?,role: Role?,
  onLongClickLabel: String?,
  onLongClick: () -> Unit,
  onDoubleClick: () -> Unit,
  onClick: () -> Unit

)

设置组合点击事件包含combinedClickable( onLongClick = { /*....*/ }, onDoubleClick ={ /*....*/ }, onClick = { /*....*/ }),

• Modifier.layoutId(layoutId: Any)

标记组建id,主要配合measure: MeasureScope使用

• Modifier.layout(
  measure: MeasureScope.(Measurable, Constraints) -> MeasureResult

)

通过 layoutId匹配 measurable.layoutId进行自定义处理

• Modifier.offset(x: Dp, y: Dp)

`等效于”android:layout_margin”,当布局方向LayoutDirection为LTR时，正x偏移将向右移动内容，当布局方向为RTL时，正x偏移将向左移动内容

• Modifier.offset(offset: Density.() -> IntOffset)

用于动态更改offset 当布局方向LayoutDirection为LTR时，正x偏移将向右移动内容，当布局方向为RTL时，正x偏移将向左移动内容

• Modifier.absoluteOffset(x: Dp, y: Dp)

absoluteOffset，不考虑布局方向LayoutDirection：正X偏移将总是向右移动内容

Ltr效果同offset

• Modifier.absoluteOffset(offset: Density.() -> IntOffset)

用法同- Modifier.offset(offset: Density.() -> IntOffset)，不考虑布局方向LayoutDirection：正X偏移将总是向右移动内容

• Modifier.padding(start: Dp, top: Dp, end: Dp, bottom: Dp)

等效于"android:padding",偏移出父控件会被裁剪

• Modifier.padding(all: Dp)

等效于"android:padding",偏移出父控件会被裁剪 all = start = end = top = bottom

• Modifier.padding(horizontal: Dp, vertical: Dp)

等效于"android:padding",偏移出父控件会被裁剪 horizontal = start = end,vertical = top = bottom

• Modifier.padding(paddingValues: PaddingValues)

PaddingValues(horizontal, vertical)   PaddingValues(start,top,end,bottom)

• Modifier.absolutePadding(left: Dp, top: Dp, right: Dp, bottom: Dp)

区别于Padding的地方是absolutePadding不考虑布局方向LayoutDirection：正X偏移将总是向右移动内容

LayoutDirection.Rtl时，left和right的值互换

总结

目前Compose是可以完美代替原有的XML，性能更好，功能更精细，但是适应起来需要时间，以上就是Modifier基础部分属性介绍，Modifier属性非常多，本篇只介绍基础属性，掌握基础属性基本已经够用了，有兴趣更进一步了解Modifier的同学可以持续关注，进阶属性稍后更新。