compose自定义布局之从view到compose

2024-01-11 08:49:33

开新坑了，compose自定义布局。基础知识不说了，直接上正题。

我们知道，在views体系下，自定义布局需要view集成viewgroup重写onMeasure、onLayout方法，在compose中，视图是组合在一起的。布局就是将布局的各个元素组合在一起，形成一个完整的布局。compose布局是通过compose函数来实现的，compose函数可以将多个布局元素组合在一起，形成一个新的布局。

我们先来看一下compose自定义布局的优点和缺点。

优点：

声明式UI：compose使用声明式UI来定义布局，这意味着你可以直接你想要创建的布局，而不用关心它是如何实现的。这使得compose自定义布局非常容易编写和维护。
高性能：compose使用一种叫做“懒惰传播”的技术来更新UI，这意味着只有当布局发生变化时，compose才会重新渲染UI。这使得compose自定义布局非常高效，即使是在处理复杂布局时也是如此。
可扩展性：compose自定义布局非常容易扩展，你可以通过组合不同的布局元素来创建更复杂的布局。这使得compose自定义布局非常适合于创建大型和复杂的应用程序。

缺点：

学习曲线：compose自定义布局的学习曲线比views体系下的自定义布局要陡峭一些，这是因为compose使用了一种新的编程语言。不过，只要你花一点时间来学习compose，你就会发现它其实非常容易掌握。
文档不完善：compose自定义布局的文档还不够完善，这使得它在某些情况下很难使用。不过，随着compose的不断发展，相信它的文档也会越来越完善。

现在我们来看看compose自定义布局的实现过程。

创建一个compose函数：compose自定义布局的实现过程是从创建一个compose函数开始的。compose函数可以将多个布局元素组合在一起，形成一个新的布局。
在compose函数中添加布局元素：在compose函数中，你可以添加各种布局元素，如Text、Button、Column、Row等。这些布局元素可以组合在一起，形成更复杂的布局。
设置布局元素的属性：在compose函数中，你可以设置布局元素的各种属性，如颜色、大小、位置等。这些属性可以帮助你自定义布局的外观和行为。
返回一个布局：最后，compose函数需要返回一个布局。这个布局可以是一个简单的布局，也可以是一个复杂的布局。

举个例子，我们来看一下如何创建一个简单的compose自定义布局。

@Composable
fun MyCustomLayout() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Hello, world!")
        Button(onClick = { /* Do something */ }) {
            Text(text = "Click me")
        }
    }
}