当前位置：首页 > news >正文

Compose常用UI组件

news 来源：原创 2025/9/20 8:51:15

Compose常用UI组件

概述
Modifier 修饰符
- 常用Modifier修饰符
- - 作用域限定Modifier
- Modifier 实现原理
- - Modifier.Element
  - 链的构建
  - 链的解析
常用基础组件
- 文字组件
- 图片组件
- 按钮组件
- 选择器
- 对话框
- 进度条
常用布局组件
- 线性布局
- 帧布局
列表组件

概述

Compose 预置了很多基础组件，如 Button，TextField，TopAppBar等，他们都是基于 Material Design规范设计等。同时也提供了 Column，Row，Box等容器组件，每个基础组件都有一个Modifier修饰符。

Modifier 修饰符

允许我们通过连是调用的写法来为组件应用一系列样式设置，如边距，位移，字体等。

常用Modifier修饰符

Modifier.size：组件大小
Modifier.background: 为组件添加背景色
Modifier.fillMaxSize：让组件高度或者宽度上填满父空间
Modifier.border & Modifier.padding：给组件添加边框和间隙
Modifier.offset：移动被修饰组件的位置，分别传入垂直或水平方向的偏移量

作用域限定Modifier

Compose 的作用域限定实现了 Modifier 的安全调用，我们只能在特定作用域中调用修饰符
如下方 Box 的定义中，BoxScope即是作用域

@Composable
inline fun Box(modifier: Modifier = Modifier,                   //修饰符contentAlignment: Alignment = Alignment.TopStart,//内容的位置propagateMinConstraints: Boolean = false,       //是否应将传入的最小约束传递给内容content: @Composable BoxScope.() -> Unit    //内容，即界面元素
) {......
}

matchParentSize：BoxScope中使用，保证当前组件的尺寸与父组件相同
weight：在RowScope或ColumnScope中使用，用于设置百分比

Modifier 实现原理

查看源码，Modifier接口有3个直接实现类或接口：伴生对象Modifier、内部子接口Modifier.Element、CombinedModifier。

伴生对象Modifier：最常用的Modifier，当我们在代码中使用 Modifier.xxx()，实际使用的就是这个伴生对象。
内部子接口 Modifier.Element：当我们使用Modifier.xxx()时，其内部实际会创建一个Modifier实例。
CombinedModifier：Compose内部维护的数据结构，用于连接Modifier链中的每个Modifier结点。

Modifier.Element

LayoutModifier：与布局相关，但凡涉及大小的，位置都和这个相关。
ComposedModifier：一个私有类，用户无法直接创建。它主要用于组合多个Modifier实例。
DrawModifier：来在布局空间中执行绘制操作，过Modifier.drawWithContent函数创建。
…,每个Element都有自己专属的作用。

链的构建

当我们通过链式调用Modifier时，其实调用的是then()方法来拼接Modifier

interface Modifier {infix fun then(other: Modifier): Modifier =if (other === Modifier) this else CombinedModifier(this, other)
}class CombinedModifier(private val outer: Modifier,private val inner: Modifier
) : Modifier

Modifier链结构

链的解析

借助 Modifier 接口中 foldIn() 与 foldOut() 用法，
foldIn()：正向遍历Modifier链，SizeModifier-> Background -> PaddingModifier -> ComposedModifier
foldOut()：反向遍历 Modifier 链, ComposedModifier -> PaddingModifier -> Background ->SizeModifier
遍历形成的链没有 CombinedModifier，因为CombinedModifier重写了foldIn()方法

interface Element : Modifier {...override fun <R> foldIn(initial: R, operation: (R, Element) -> R): R =operation(initial, this)
}class CombinedModifier(private val outer: Modifier,private val inner: Modifier
) : Modifier {...override fun <R> foldIn(initial: R, operation: (R, Modifier.Element) -> R): R =inner.foldIn(outer.foldIn(initial, operation), operation) 
}

我们知道很多Compose组件都是基于Layout这个基础组件实现的，所以我们来看看我们创建的Modifier在其中是如何进行传递的。可以发现我们的modifier传入了一个名为materializerOf方法。

@Composable inline fun Layout(content: @Composable () -> Unit,modifier: Modifier = Modifier,measurePolicy: MeasurePolicy
) {...ReusableComposeNode<ComposeUiNode, Applier<Any>>(factory = ...,update = {...},skippableUpdate = materializerOf(modifier), // 重点content = ...)
}

走进Composer.materialize()。可以发现源码中使用了fouldIn()方法，进行了递归处理，完全摊开的Modifier链。

fun Composer.materialize(modifier: Modifier): Modifier {...val result = modifier.foldIn<Modifier>(Modifier) { acc, element ->acc.then(if (element is ComposedModifier) {@kotlin.Suppress("UNCHECKED_CAST")val factory = element.factory as Modifier.(Composer, Int) -> Modifierval composedMod = factory(Modifier, this, 0) // 生产 Modifiermaterialize(composedMod) // 生成出的 Modifier 可能也包含 ComposedModifier，递归处理} else element)}...return result
}

常用基础组件

文字组件

Text：文本组件，如果想脱离Material Design使用，需要用BasicText。
SelectionContainer：Text默认是不能长按选择的，此组件对包裹的Text进行选中。
TextField：文本输入框，如果想脱离Material Design使用，需要使用BasicTextField

图片组件

Icon：用于显示小图标，支持矢量图ImageVector，位图ImageBitmap，画笔Painter
Image：用于显示图片。

Image和Icon对比，如下参数不同：
alignment: 内容对齐方式
contentScale: 缩放，类似Android ScaleType
alpha: 内容的Alpha通道
colorFilter: 色彩过滤器，可以实现tint、滤镜矩阵等，非Compose特有，不再展开

按钮组件

Button：Material Design风格按钮，使用 interactionSource监听组件状态的事件源。
ImageButton：可点击的图标，一般用于应用中导航，图标默认尺寸 24*24dp

选择器

Checkbox：复选框
TriStateCheckbox：三态选择器
Switch：单选开关
Slider：滑竿组件

对话框

Dialog:没有show和dismiss，显示隐藏看 Composable 在重组中是否被执行。
AlertDialg：警告对话框，是对 Dialog 的封装，遵守 MD 风格。

进度条

LinearProgressIndicator：直线进度条
CircularProgressIndicator：圆形进度条。

常用布局组件

线性布局

Column：用于垂直排列多个组件。
Row：用于水平排列多个组件。

帧布局

Box：用于在屏幕上创建一个矩形的区域，类似 FrameLayout。
Surface：用于绘制一块可交互的区域，用于设置边框，圆角，颜色等。

如果需要快速设置界面形状，阴影，边框，颜色，可用Surface，减少Modifier的使用量
如果只是需要简单设置界面的背景颜色，大小，且需要简单安排里面布局的位置，则用Box更合适。

Spacer：留白组件。
ConstraintLayout：约束布局，使用 createRefs 和 constrainAs 绑定引用，同时支持Barrier，Guideline，Chain。
Scaffold 脚手架，实现了 Material Design 的布局结构，可以方便的构建 TopAppBar，BottomNavigation和侧边栏。

列表组件

LazyComposables：包含 LazyColumn 和 LazyRow, 用于垂直和水平显示滚动的列表。
LazyListScope作用域：包含 item，item(Int) 和 items(List)以及 itemsIndexed(List)，用于构建LazyComposables的列表内容。
在列表中为内容设置外边距，可以使用contentPadding属性。

参考资料：图解Compose Modifier实现原理，竟然如此简单！

Compose常用UI组件

概述

Modifier 修饰符

常用Modifier修饰符

作用域限定Modifier

Modifier 实现原理

Modifier.Element

链的构建

链的解析

常用基础组件

文字组件

图片组件

按钮组件

选择器

对话框

进度条

常用布局组件

线性布局

帧布局

列表组件

相关文章：