注意，Jetpack Compose中的控件被定义成一个一个的可组合函数，官方称这些控件为Composable，翻译成中文是“可组合项”，当强调它作为一个界面的一部分出现时，我会使用“控件”或“元素”之类的术语，要注意这三者之间的差别，我不知道有没有更好的词，所以我只能用这两个。当仅仅强调它是一个可组合项时，我会正常使用“可组合项”这个术语。
Layout系统
基本原则
元素需要通过一些约束来测量自己，这限制了一个元素的最大和最小的宽高。如果一个元素有子元素，那么它会测量每一个子元素来帮助决定自己的大小，每当一个元素向父元素报告了它自己的大小时，那么它就得到了相对于自身来放置自己的子元素的机会。
compose不允许多次测量，和Flutter一样，原因就是重复测量作用于UI这种树形结构的是时候会带来指数级的性能下降。当然有很多时候你需要重复获取子元素的一些信息，这会有其它的办法。
自定义 layout modifier
在compose中，Modifier提供了一系列函数，使用它们可以提供很多布局上的参数，比如padding等信息，通过自定义modifier来看下它是怎么工作的。
通过扩展函数来扩展Modifier中的方法，因为modifier是链式调用的，我们扩展的方法也应该符合链式调用规则，Modifier.then方法用来辅助完成链式调用，它接受一个Modifier，返回一个与这个Modifier结合后的Modifier。
fun Modifier.firstBaselineToTop(
firstBaseLineToTop: Dp
) = this.then(
layout { measurable, constraints ->
// do something...
}
)
里面的这个layout也是一个Modifier中的方法，它接受一个参数，这个参数是一个lambda，一会再说，这个lambda里面就是我们进行测量和摆放子控件的地方。
measurable：被摆放的子控件
constraints：子控件的最大和最小宽高限制
下面实现一个这个效果，可以通过我们扩展的firstBaselineToTop方法，设置文字的FristBaseline与顶部的间距。
第一步，我们需要测量这个子控件，获得一个Placeable对象，我们可以通过这个Placeable对象，相对于父控件的位置来摆放这个子控件。
layout { measurable, constraints ->
val placeable = measurable.measure(constraints = constraints)
}
这里可以将给定的constraints限制直接传入，也可以自己构造。
现在这个子控件已经根据给定的限制被测量好，下一步，我们就需要计算它离顶部的高度，这里应该使用用户传入的高度减去FirstBaseline的位置，得到的就是这个控件应该离顶部的高度。
// 检测子元素是否有FirstBaseLine
check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
val firstBaseLine = placeable[FirstBaseline]
// 计算元素该被放置到的Y坐标，并增加元素的高度
val placeableY = firstBaseLineToTop.roundToPx() - firstBaseLine
val height = placeable.height + placeableY
万事俱备，该摆放这个控件了。
使用MeasureScope.layout方法向外部报告大小，并摆放自己，这个方法会返回一个MeasureResult，正好是外部整个lambda表达式所要求的返回值。
layout(placeable.width,height) {
placeable.placeRelative(0,placeableY)
}
完整代码：
fun Modifier.firstBaselineToTop(
firstBaseLineToTop: Dp
) = this.then(
layout { measurable, constraints ->
val placeable = measurable.measure(constraints = constraints)
check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
val firstBaseLine = placeable[FirstBaseline]
val placeableY = firstBaseLineToTop.roundToPx() - firstBaseLine
val height = placeable.height + placeableY
layout(placeable.width,height) {
placeable.placeRelative(0,placeableY)
}
}
)
@Preview
@Composable
fun useFirstBaselineToTop() {
Column {
Text("Hi,there", modifier = Modifier.firstBaselineToTop(24.dp))
}
}
@Preview
@Composable
fun usePadding() {
Column {
Text("Hi,there",modifier = Modifier.padding(top = 24.dp))
}
}
自定义Layout
下面是自定义的一个简单的Column布局。因为和自定义Modifier差不多，不多说了。
@Composable
fun CustomColumn(
modifier: Modifier = Modifier,
content: @Composable () -> Unit
) {
Layout(modifier = Modifier, content = content) { measurables, constraints ->
// 测量每一个子组件
val placeables = measurables.map {
it.measure(constraints = constraints)
}
// yPos用于记录当前组件的y位置
var yPos = 0
// 向父元素报告大小，这里和父元素一样大
layout(constraints.maxWidth,constraints.maxHeight) {
// 放置每一个子元素
placeables.forEach { placeable ->
placeable.placeRelative(0,yPos)
yPos += placeable.height
}
}
}
}
总结
可以看出Jetpack Compose面向组合实现UI树相较于传统View模式的灵活性。
总的来说就是如下几点：
1.子控件的每个modifier工作，进行测量，并且摆放（下一个modifier会在上一个的基础上进行测量摆放，这也是为什么modifier对顺序敏感）
2.父控件测量子控件的大小，（这个大小是子控件自己上报的，我个人觉得应该是modifier链中的最后一个layout，其他的layout是向下一个modifier上报，只是个人拙见，不对还望指出），根据这些大小计算出自己该有的尺寸，并上报给父控件的父控件，最后按照自己内部安排好的顺序对子元素进行摆放。
结语：后续会持续更新哦，喜欢就点赞关注一下吧。
相关视频
【Android进阶】Compose函数式编程重点分析
网友评论