目录
- 前言
- 控件实时预览
- Modifier
- remember
- 状态提升
前言
学了一段时间的Compose,不得不说声明式UI比原生的开发效率快很多,而且Compose也是Google现在主推的开发模式,可以动态化地更改ui,相比于databinding对数据和布局进行绑定。Compose更近一步,界面上任一控件也可以动态地进行改变。在某些场景下,有些需要写多套布局,而Compose只需要写一套。
缺点个人认为也显而易见,虽然理论上可以实现几乎所有和原生一样的功能,但是比如RecyclerView这样的控件,Compose中的LazyColumn还是没有那么丝滑;还有确实很多合适的第三方库,也会带来一些困扰。
写博客的目的更多是对自己学习的一个记录,方便以后复习,所以需要一定的基础,可能不会一步步地来进行展示。
控件实时预览
利用@Preview()注解,不能带参数。
更改后可以实时更新,如下:
还是非常方便的~
一般加@Composable注解,作为ui界面,并且函数首字母大写,和方法区分。
布局元素Column、Row和Box,前两者分别对应列、行。Box 是一个能够将里面的子项依次按照顺序堆叠的布局组件,类似FrameLayout。
Modifier
是Compose ui开发的精髓,是一种修饰符,以组合的方式来修改组件,顺序很重要,会影响。
主要作用如下:
- 可以去更新可组合项的大小,布局,行为和外观。
- 添加互动。例如点击,滚动,可拖拽,缩放等。
- 处理用户输入
- 添加信息,如无障碍
clickable 使可组合项响应用户输入,并显示涟漪。
padding 在元素周围留出空间。
fillMaxWidth 使可组合项填充其父项为它提供的最大宽度。
size() 指定元素的首选宽度和高度。
在行尾放元素
weight 修饰符会让元素填满所有可用空间,使其“具有弹性”,也就是会推开其他没有权重的元素(即“无弹性”元素)。该修饰符还会使 fillMaxWidth 修饰符变得多余。
Surface 从字面上来理解,是一个平面,在 Material Design 设计准则中也同样如此,我们可以将很多的组件摆放在这个平面之上,我们可以设置这个平面的边框,圆角,颜色等等。
remember
对数据进行缓存,避免重新重组后数据丢失了。
可以进行一个ui的动态改变,所谓的内容的状态。比如
当为true,文本显示小猫咪,false重组显示为小狗。
val isShow = remember { mutableStateOf(false) },
if(isShow.value){Text("小猫咪")
}else{Text("小狗")
}
还可以
var isShow by remember { mutableStateOf(false) },
这样的话我们把isShow委托给了右边,就不需要使用value了。
状态提升
在可组合函数中,被多个函数读取或修改的状态应位于共同祖先实体中,此过程称为状态提升。“提升”意为“提高”或“升级”。
如果你的子组合函数被多次重用,请不要使其有状态函数( stateful),始终使用状态提升以便可以重用并使它们感觉独立。