Compose使用总结

1,285 阅读2分钟

一、为什么使用compose

Compose是一个由Google Android团队官方推出的声明式UI框架,总体来说可以减少内存占用,无视控件之间的嵌套,刷新重组的时候仅仅会更新有变化的组件,以此来保证运行效率

二、基础控件和布局

Column { Text( text = "This is Text", color = Color.Blue, fontSize = 26.sp ) }

这段代码里面Colume代表了【竖】,对应的Row代表了【横】,可以理解为线性布局

fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
) {
    ...
}

【Button】【TextFiled】【Image】【ProgressIndicator】等控件自行探索

基本布局如下

image.png

image.png

image.png

下面这个网址可以查询,compose中的控件对应android哪一个

www.jetpackcompose.app/What-is-the…

三、 Compose中的Modifier

  • 修改Compose控件的尺寸、布局、行为和样式。
  • 为Compose控件增加额外的信息,如无障碍标签。
  • 处理用户的输入
  • 添加上层交互功能,如让控件变得可点击、可滚动、可拖拽
  • pointerInput 一个偏底层实现点击或者拖动的内置函数
  • 设置点击等监听函数直接使用clickable

其他的需要其他参数使用

四、State

State可以让Compose感知到界面上有状态发生了变化,从而对界面上相关联的Composable函数进行重组。不仅如此,State还可以让Compose能够精准只更新那些状态有变化的控件,而那些状态没有变化的控件在重组的时候则会跳过执行。

由此可见,为了让Compose的界面可以交互,State可以说是至关重要的组件。


val count = rememberSaveable { mutableStateOf(0) }
可以实现类似viewmodel的效果

compose也可以实现viewmodel的数据保存而且更简单,使用的rememberSaveable和muteabledate嵌套使用并且也有在深浅色切换,屏幕旋转等情形下,拥有值不被销毁重写的能力

结合MVVM的内容暂时不展开

五、Lazylayout

Lazy Layout大概就相当于View系统中的ListView和RecyclerView。

有多好用呢,下面是recycleview的作者的自述

image.png

eg:熟悉recycleview的知道,recycleview虽然好用,但是流程复杂,需要创建子项item,适配数据源,处理数据后再主界面丢进去然后设置布局,下面的这几行代码可以完全实现一样的功能

@Composable
fun ScrollableList() {
    LazyColumn {
        items(20) { i ->
            Text(
                text = "Item $i",
                modifier = Modifier
                    .fillMaxWidth()
                    .height(60.dp)
            )
        }
    }
}

具体用法很多,读者可自行探索