2024年鸿蒙最新Jetpack Compose - LayoutModifier （十二），2024年最新【高级HarmonyOS鸿蒙架构师系统学习

本文链接：https://blog.csdn.net/2401_84862348/article/details/138900171

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Column(Modifier.fillMaxWidth()) {

    Text(text = "hello world", Modifier.layout { measurable, constraints ->
        // 可以理解为 传统view 中测量自己大小的步骤 获得自己宽高的尺寸
        val placeable = measurable.measure(constraints)
        // 拿到尺寸以后 就可以摆放自己的位置和大小了，大小就用测量出来的
        layout(placeable.width, placeable.height) {
            // 位置 就设置偏移量 即可
            placeable.placeRelative(0, 0)
        }

    })

    Text(
        text = "hello world"
    )
}

这里的2个Text 在实际展示上位置和大小都一样，没有区别，放这个例子其实就是为了给大家展示一下 layout的作用，实际上对于Modifer.size ,padding 等扩展函数中，他们的内部实现都是与这个layout 息息相关的

稍微分析一下上述的程序

由上图可知，我们传递进去的layout的lamda 他的返回值必须得是 MeasureResult 这个接口类型的对象

可以看下这个接口，他有宽高这2个我们熟悉的参数，还有 alignmentlines 这个有点像文字绘制时候的baseline的概念，先跳过不处理，另外还有一个placeChildren的函数，这个函数的作用前面也提到过了，就是摆放自己的位置，这4个要素缺一不可，

回到我们开头的程序中

我们在lambda 内部调用的layout这个函数注意看他是属于measureScope的不要和Modifier的layout搞混，这个内部调用的layout函数，他默认帮我们返回了一个MeaureResult的对象，方便就方便在这个对象他默认帮我们实现了 alignmentLines 与 placeChildren函数

有人可能会疑惑这里的 measure和layout和传统自定义view的measure layout 好像啊，这里确实很像，但是细节上不是一个东西

比如说layout，传统自定义view中的layout 是专属于viewgroup的，你可以重写layout函数，摆放你所有子view的位置

而在compose的Modifier的layout中你是无法摆放你子view的位置的

尝试在layout中完成padding的效果

我们有了第一小节的基础就可以来尝试的完成一个padding的效果

setContent {
    Column(Modifier.fillMaxWidth()) {

        Text(text = "hello world",
            Modifier.background(Color.Yellow)
                .layout { measurable, constraints ->
                    val padding = 10.dp.roundToPx()
                    // 可以理解为 传统view 中测量自己大小的步骤 获得自己宽高的尺寸
                    val placeable = measurable.measure(
                        constraints.copy(
                            maxWidth = constraints.maxWidth + padding * 2, maxHeight = constraints.maxHeight + padding * 2
                        )
                    )
                    // 拿到尺寸以后 就可以摆放自己的位置和大小了，大小就用测量出来的
                    layout(placeable.width + padding * 2, placeable.height * 2) {
                        // 位置 就设置偏移量 即可
                        placeable.placeRelative(padding, padding)
                    }

                }
                )

        Text(
            text = "hello world", modifier = Modifier.background(Color.Red)
        )
    }
}