【Android笔记】Jetpack Compose

作者：天景科技苑 | 2024-08-02 06:42:25

踩

jetpack compose

注意，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...

    }
)
1
2
3
4
5
6
7
8

里面的这个layout也是一个Modifier中的方法，它接受一个参数，这个参数是一个lambda，一会再说，这个lambda里面就是我们进行测量和摆放子控件的地方。

measurable：被摆放的子控件 constraints：子控件的最大和最小宽高限制下面实现一个这个效果，可以通过我们扩展的firstBaselineToTop方法，设置文字的FristBaseline与顶部的间距。

第一步，我们需要测量这个子控件，获得一个Placeable对象，我们可以通过这个Placeable对象，相对于父控件的位置来摆放这个子控件。

layout { measurable, constraints ->
    val placeable = measurable.measure(constraints = constraints)
}
1
2
3

这里可以将给定的constraints限制直接传入，也可以自己构造。

现在这个子控件已经根据给定的限制被测量好，下一步，我们就需要计算它离顶部的高度，这里应该使用用户传入的高度减去FirstBaseline的位置，得到的就是这个控件应该离顶部的高度。

// 检测子元素是否有FirstBaseLine
check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
val firstBaseLine = placeable[FirstBaseline]

// 计算元素该被放置到的Y坐标，并增加元素的高度
val placeableY = firstBaseLineToTop.roundToPx() - firstBaseLine
val height = placeable.height + placeableY
1
2
3
4
5
6
7

万事俱备，该摆放这个控件了。

使用MeasureScope.layout方法向外部报告大小，并摆放自己，这个方法会返回一个MeasureResult，正好是外部整个lambda表达式所要求的返回值。

layout(placeable.width,height) {
    placeable.placeRelative(0,placeableY)
}
1
2
3

完整代码：

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))
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

自定义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
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

总结可以看出Jetpack Compose面向组合实现UI树相较于传统View模式的灵活性。总的来说就是如下几点： 1.子控件的每个modifier工作，进行测量，并且摆放（下一个modifier会在上一个的基础上进行测量摆放，这也是为什么modifier对顺序敏感） 2.父控件测量子控件的大小，（这个大小是子控件自己上报的，我个人觉得应该是modifier链中的最后一个layout，其他的layout是向下一个modifier上报，只是个人拙见，不对还望指出），根据这些大小计算出自己该有的尺寸，并上报给父控件的父控件，最后按照自己内部安排好的顺序对子元素进行摆放。

更多Jetpack Compose指南可以扫描下方二维码免费领取！！！