Skip to content

什么是compose

image.png 声明式UI image.pngimage.png 我们编写代码来按我们的想法描述 而不是如何转换到对应的状态。这里的关键是,编写像这样的声明式代码时,您不需要关注ui在先前是什么状态,而只需要指定当前应当处于的状态。框架控制着如何从一个状态转到其他状态,所以我们不再需要考虑它。

命令式UI

image.png

声明式UI

image.png

compose的优势

image.pngimage.pngimage.png

创建项目

image.png 注意修改gradle的下载位置,修改settings.gradle文件 image.png

布局

排列布局

column类似线性布局的垂直布局 row类似线性布局的水平布局 box是层叠布局

配置布局

例如配置图片的圆角,组件之间的间距,组件的大小等,可以使用modifier image.pngimage.png

material design

image.png

列表

可以使用 Compose 的 LazyColumn 和 LazyRow。这些 Composable 只渲染屏幕上可见的元素,所以它们的设计对于长列表来说很有效果。同时,它们避免了 RecyclerView 与 XML 布局的复杂性。

image.png

Compose所解决的问题

在编写可维护的软件时,我们的目标是最大程度地减少耦合增加内聚。 尽可能的将相关的代码组织在一起,以便我们可以轻松地维护它们,并方便我们随着应用规模的增长而扩展我们的代码,这个称之为关注点分离image.png xml所存在的问题,使用kotlin编写视图模型和业务逻辑,而布局使用xml,使得两者之间存在一条鸿沟。所以compose让开发者可以使用kotlin编写布局和业务逻辑,使ViewModel和View之间更加独立。 例如在编写列表的案例中,常规的使用xml编写一个滚动列表,需要在xml中编写RecyclerView,在Java中获取控件,然后还需要编写一个视图适配器,而视图适配器中又需要依赖一个item的xml布局,所以导致布局和视图哦模型之间存在很强的耦合。 而使用compose编写的滚动列表布局,我们主要关注参数的传递,提供需要展示的数据即可,不需要关注视图内部的实现。

kotlin
@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(message)
        }
    }
}

image.png

组合代替继承

Compose编写布局我觉得一个很大的优势就是使用组合来代替继承,我们知道在设计模式领域中装饰者模式就是典型的使用组合来代替继承扩展类的功能,而这种思想在compose中也有体现。 例如我们原生使用继承去扩展一个布局类的功能,往往会采用继承,例如TextView继承自View,Button继承TextView,并且继承往往受语言的特性限制,例如Java无法实现多继承。 但是使用compose,例如composable函数,将布局组合在一起,扩展更复杂的布局。 image.png

重组

使用重组局部刷新布局,并且状态的变化会自动驱动布局重组,重新刷新界面。 这样不需要我们在处理完业务逻辑后去编写大量的回调,以及监听从而更新界面。