原计划今天要写到 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 函数是一个顶层函数。
那么问题来了,作用域是什么呢?
作用域通过接口定义,在布局类的 Composable 的最后一个参数里,目的是限制扩展函数的使用范围。在开发过程中表现为布局代码块的 this:
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 相关内容了吧…
打卡不易,社畜叹气。被水淹没,不知所措。