Compose乃是大势所趋，不做太多介绍。本文介绍一些基础控件的使用方式

讲讲声明式

只需要给界面进行一次性的声明，不需要手动更新界面，而是自动更新。

文字

  1. // 显示一段文字
  2. Text(text = "Text")
  3. // 设置颜色
  4. Text(text = "Color", color = Color.Red)
  5. // 设置字体大小
  6. Text(text = "Size", fontSize = 18.sp)
  7. // 设置粗体
  8. Text(text = "加粗", fontWeight = FontWeight.W800)
  9. // 文字斜体
  10. Text(text = "斜体", fontStyle = FontStyle.Italic)
  11. // 斜体+加粗
  12. Text(text = "加粗 and 斜体", fontStyle = FontStyle.Italic, fontWeight = FontWeight.W800)

其中FontWeight有W100-W900的值。详情自行查看
image.png

图片

  1. Image(painterResource(R.mipmap.ic_launcher), TAG)
  3. Icon(painterResource(R.mipmap.ic_launcher), TAG)

其中TAG是contentDescription参数，用于无障碍服务。

加载网络图片或者本地图片，可用Coil库的Compose版本

纵向布局

类似LinearLayout设置纵向的布局，结合之前本文和图片的例子

  1. Column {
  2.     // 显示一段文字
  3.     Text(text = "Text")
  4.     // 设置颜色
  5.     Text(text = "Color", color = Color.Red)
  6.     // 设置字体大小
  7.     Text(text = "Size", fontSize = 18.sp)
  8.     // 设置粗体
  9.     Text(text = "加粗", fontWeight = FontWeight.W800)
  10.     // 文字斜体
  11.     Text(text = "斜体", fontStyle = FontStyle.Italic)
  12.     // 斜体+加粗
  13.     Text(text = "加粗 and 斜体", fontStyle = FontStyle.Italic, fontWeight = FontWeight.W800)
  14.     Image(painterResource(R.mipmap.ic_launcher), TAG)
  15.     Icon(painterResource(R.mipmap.ic_launcher), TAG)
  16. }

横向布局

类似LinearLayout设置横向的布局

  1. Row {
  2.     // 显示一段文字
  3.     Text(text = "Text")
  4.     // 设置颜色
  5.     Text(text = "Color", color = Color.Red)
  6. }