Compose常用UI组件

概述

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    //内容，即界面元素
) {
    ......
}

1. matchParentSize：BoxScope中使用，保证当前组件的尺寸与父组件相同
2. 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 接口中 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) -> Modifier
                val composedMod = factory(Modifier, this, 0) // 生产 Modifier
                materialize(composedMod) // 生成出的 Modifier 可能也包含 ComposedModifier，递归处理
            } else element
        )
    }
  ...
    return result
}

常用基础组件

• Text：用于显示文本内容。
• Image：用于显示图片。
• Button：用于创建按钮。
• TextField：用于接收用户输入的文本。
• Divider：用于在 UI 中添加分隔线。

常用布局组件

• Column：用于垂直排列多个组件。
• Row：用于水平排列多个组件。
• Box：用于在屏幕上创建一个矩形的区域。
• Surface：用于绘制一块可交互的区域。
• Card：用于显示一个卡片式的 UI 元素。
• Spacer：留白组件。
• ConstraintLayout：约束布局。
• Scaffold 脚手架。

列表组件

• LazyComposables：包含 LazyColumn 和 LazyRow, 用于垂直 和 水平显示 滚动的列表。
• LazyListScope作用域：包含 item，item(Int) 和 items(List)以及 itemsIndexed(List)，用于构建LazyComposables的列表内容。

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