[Android Compose] 三、Compose 最常见单词:Modifier | 七日打卡

2,014 阅读3分钟

原计划今天要写到 Compose 中的约束布局,但回顾到上一期的代码,Column 和 Row 之外的代码都没有说明,尤其是每一个 Composable 都用到的 Modifier,是学习路上绕不开的障碍。今天的目标是除掉这个障碍。

目录:
[Android Compose] 一、朋友,你知道 Compose 吗 | 七日打卡
[Android Compose] 二、Compose 初见+线性布局 | 七日打卡

一、书接上文

上次写到了这样的一个布局的实现,调试过程中我给每个 Composable 设置了不同的背景颜色,用来判断 View 的覆盖关系。

modifier=Modifier.background(Color(0xFF96BA86))

每一个 Row、Column、Text、Image、Spacer 都有一个叫做 modifier 的参数,并且排在很靠前的位置。

二、Modifier 是什么

从 Composable 的概念上看 Modifier 是 Composable 的修饰符,Modifier 可以修改 Composable 的样式和行为,处理用户输入以及其他高级手势交互。

从 xml 搭建布局的概念上看 Modifier 类似于的 xml-attribute,同名的函数在所有作用域的功能都一样,不同的作用域下可以用不同的函数。

从代码实现上看,Modifier 只是一个普通的 kotlin 对象。

三、不同的作用域,不同的Modifier

Modifier 既是接口,又是伴生对象。接口里只定义了一系列组合 Modifier 的函数,并没有我们用过的 background 或者 width 等函数。这些具体的功能函数是绑定特定作用域的,通过 Kotlin 的扩展函数实现。background 的作用域是所有的 Composable,所以 background 函数是一个顶层函数

background 函数源码

那么问题来了,作用域是什么呢?

作用域通过接口定义,在布局类的 Composable 的最后一个参数里,目的是限制扩展函数的使用范围。在开发过程中表现为布局代码块的 this

RowScope

RowScope 里定义了排列其内部子元素的一系列函数:

这些函数只能在 RowScope 作用域中使用,直接定义一个 Composable 再添加 Text 的话,配置 Modifier 的时候就没有 align 函数。(Column 里也能找到 align 函数是因为 ColumnScope 定义了一套名字相同的函数)

四、附录:Modifier 顶层函数速记

函数名(不含重载)
fillMaxHeight
fillMaxWidth
fillMaxSize
preferredWidth
preferredHeight
preferedSize
preferredWidthIn
preferredHeightIn
preferedSizeIn
width
height
size
widthIn
heightIn
sizeIn
wrapContentWidth
wrapContentHeight
wrapContentSize
background
padding
paddingFrom
paddingFromBaseLine
absolutePadding
clip
clipToBounds
absoluteOffset
offset
aspectRatio
defaultMinSizeConstraints

PS:时间紧迫,没能挨个尝试功能,详细解释在本周内更新。


其实比起 Modifier 的功能介绍,它巧用 Kotlin 扩展函数构建的灵活结构更值得现阶段学习,我一直在积极尝试更加 Kotlin 风格的代码写法,还是摆脱不开 Java 思想的束缚,Google 的代码就很有想象力。但是……

哈哈哈我真的写不动了…明天可能要写开源项目介绍或者 Live2D 相关内容了吧…

打卡不易,社畜叹气。被水淹没,不知所措。