Compose 基本控件

Jetpack Compose 是用于构建原生 Android界面的新工具包。它使用更少的代码、强大的工具和直观的Kotlin API，可以帮助您简化并加快 Android界面开发，打造生动而精彩的应用。

声明式UI

Compose使用了声明式UI。和命令式不同，声明式UI只需要声明，UI内容不需要通过代码主动（命令式）去显示或改变视图界面，从而使编写和维护应用界面变得更加容易。

常用控件的写法

1.Row/Column => LinearLayout

Row {
    Text(text = "LinearLayout and Row")
    Image(painterResource(id = R.drawable.ic_launcher_background), "icon")
}

2.Box => FrameLayout/RelativeLayout

Box{
    Text(text = "Box and FrameLayout")
    Image(painterResource(id = R.drawable.ic_launcher_background), "icon")
}

3.LazyColumn/LazyRow => Recyclerview

val names = listOf("a", "b", "c", "a", "b", "c")
LazyColumn {
      items(names) { name ->
          Column {
              Text(name)
              Image(painterResource(id = R.drawable.ic_launcher_background), "icon")
          }
      }
  }

控件的属性修改

Compose控件属性，比如背景，字体大小修改。需要注意的是Modifier对顺序是敏感的，不同的顺序有不同的效果：

（1）比如先调用padding、后background => margin效果；先调用background，后padding => padding效果

Compose本身不存在margin属性调用，是通过padding+调用顺序的不同就可以实现我们习惯的padding和margin效果

（2）clickable放的顺序不同，效果也是不一样的，比如放在padding函数的前面，其点击生效的范围会包含padding的区域

Column(
    Modifier
        .padding(8.dp)
        .background(Color.Red)
) {
    Text(
        text = "LinearLayout and Column",
        // clickable放在前面和后面的效果也是不一样的，放在前面会对后续的padding也生效
        Modifier
            .clickable {
                Log.d(TAG, "onCreate: click text")
            }
            .background(Color.Yellow, RoundedCornerShape(3.dp))
            .padding(10.dp)
            , fontSize = 20.sp
    )
    Image(
        painterResource(id = R.drawable.nb), "icon",
        Modifier
            .clip(CircleShape)
            .size(250.dp)
    )
}

通用的设置一般都放在Modifier, 专项的设置就放着控件函数里。比如点击事件clickable，但Button控件比较特殊

Button就是用来点击的，所以为了方便，开发者直接给了一个onClick函数，就不需要通过Modifier来设置

Button(onClick = { /*TODO*/ }) { }

Compose的分包结构

Compose 由 androidx 中的 7 个 Maven组 ID 构成。每个组都包含一套特定用途的功能

Compose分包的层次，从上层到下层顺序是：

• material/material3：Material Design设计规范/风格的UI组件
• foundation：基础常用的组件，团队可以扩展foundation构建一套自己的设计风格
• animation: 方便构建动画
• ui：最基本的UI组件，布局、绘图...
• runtime：Compose 的编程模型和状态管理的基本构建块，以及编译器插件针对的核心运行时。
• compiler：借助 Kotlin 编译器插件，转换 @Composable - functions（可组合函数）并启用优化功能。

一般依赖material/material3就够了，需要预览功能要依赖ui-tooling（当然这个一般都是要的，谁不想要预览功能呢-^-）

implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"