[移动开发]Jetpack compose比xml优秀的地方

作者：wuzhuoyu
转载地址：https://juejin.cn/post/7109867329365737509

compose 比xml优秀的地方

Jetpack Compose 是来自 Google 的现代 UI 工具。它的第一个稳定版本是在 2021 年 7 月，到目前为止，许多 Kotlin 开发人员都喜欢这种在 Android 中设计 UI 的新方式。让我们看一下 Jetpack Compose 的一些出色示例，以及它与传统 XML 的区别。

声明式界面

在compos问世之前我们一直采用的都是命令式的UI，第一步就是先通过findViewById获取元素才能获取内容，再者才是修改元素，虽然有ViewBinding和DataBinding两个方式来方便命令UI，但是所需要的配置都是比较复杂的，使用也得额外仔细。

声明式的UI是描述屏幕状态的，是一种预先定义的方式，并且UI元素在监听到状态发生时而改变，比如按钮计数器就的实现。

class ComposeActivity: ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      Box (modifier = Modifier.fillMaxSize().background(Color.White)) {
        CountScreen()
      }
    }
  }
  
  @Composable
  fun CountScreen() {
    var count by remember { mutableStateOf(0) }
Column(
      horizontalAlignment = Alignment.Center,
      verticalArrangment = Arrangement.Center
    ) {
      Text(text = count.toString())
      Spacer(modifier = Modifier.height(16.dp))
      Button(onClick = { count++ }) {
        Text(text = "点击+1")
      }
    }
  }
}

列表展示便捷

以往我们在展示列表的时候往往会用上recyclerview，但是我们都知道这样会产生很多模板代码，当你使用compose的话就可以消除这些模板代码。

class ComposeActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      val lists = listOf(
        ListEntity("一", "第一条数据"),
        ListEntity("二", "第二条数据"),
        ListEntity("三", "第三条数据"),
      )
LazyColumn(modifier = Modifier.fillMaxSize().background(Color.White)) {
        items(lists) { entity -> 
          ListRow(entity)
        }
      }
    }
  }
  @Composable
  fun MessageRow(listEntity: ListEntity) {
    Column(modifier = Modifier
                        .fillMaxWidth()
                        .border(1.dp, Color.Black)
                        .padding(8.dp)
    ) {
      Text(text = listEntity.id)
      Text(text = listEntity.dec)
    }
  }
}

LazyColumn 是垂直 RecyclerView 的替代品。仅当可组合项出现在屏幕上时，屏幕才会呈现。由于 Compose 是一个声明式 UI 框架，因此可组合项将在状态更改时重新绘制。

导航的便捷

对于xml的导航，最初的做法是需要有对于的activity或者fragment来一起配合；尽管还有jetpack的导航库作为支撑，但是由于配置繁琐的问题还是依旧比较难用。当你使用compose的话就可以很友好的处理这类问题。

class ComposeActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      val navController = rememberNavController()
      NavHost(startDestination = "home") {
        composable("home") {
          Home(navController)
        }
        composable("personal") {
          Personal(navController)
        }
      }
    }
  }

  @Composable
  fun Home(navController: NavController) { //UI具体实现 }

  @Composable
  fun Personal(navController: NavController) { //UI具体实现  }
}

动画

不得不说compose对于动画的支撑是非常到位的，传统的xml如果需要完成一个动画功能，需要配置大量的内容，所以xml在完成复杂动画的展示上向来都是力不从心。而compose的动画都是通过api的调用，我们可以简单的自由配置相关动画属性。

var visible by remember { mutableStateOf(true) }
AnimatedVisibility (visible) { 
	AnimatedView()
}

总结

compose的引进这并不是以为着xml就是被弃用了，但是compos绝对是应用层开发的趋势，谷歌花了三年时间正式宣布 Kotlin 为他们的语言，并推出了一个可以在 Kotlin 中运行的 UI 工具包。同样，在几年内，Compose 将成为处理 UI 的首选方式，而 Google 将创建新组件，只有使用 Jetpack Compose 才能呈现这些组件。