用 Compose 写出一个简单界面

用 Compose 写出一个简单界面

Compose 一些基本概念问题

1. Compose 独立于平台
   1. 不依赖于 android 更新，可以独立发布: ConstraintLayout, AppCompat, ViewModel, RecyclerView 等
   2. Compose 更激进，独立于 Android，与 Android 无关，可以跨平台
   3. 独立于平台的一个最明显的用处就是在 Android Studio 中可以进行更强大的预览功能
   4. 目前 Compose 支持 PC 已经进入 beta 版、也正在推进 Web 端
2. 声明式 UI
   1. 只需要对界面进行一次性的声明，而不需要在不同条件下对界面进行操作。

简单控件

Compose 中，界面需要在 setContent{} 中进行写。

Text

Text("Mlya")

Image

Image(painterResource=xxx, contentDescription=xxx)
Image(ImageBitmap)
Image(ImageVector)

• 位图 vs 矢量图
• ImageBitmap or ImageVector
• painterResource 指定资源文件（R.drawable.xxx），很像 Android 中的 Drawable 的概念

加载网络图片

• Coil: Coroutine Image Loader
  • 使用了 Kotlin 协程
  • 不是面向 View 系统的
  • Android 官方推荐

implementation 'io.coil-kt:coil:1.4.0'

使用：

Image(
    painter = rememberImagePainter(data = "https://cdn.mlya.xyz/mweb/16351749286790.jpg"),
    contentDescription = "Coil Image",
    modifier = Modifier.size(128.dp)
)

基础布局

• FrameLayout -> Box
• LinearLayout -> Row, Column
• RelativeLayout -> Box & Modifier
• ConstraintLayout -> 官方将 ConstraintLayout 移植到了 Compose 中
• RecyclerView -> LazyColumn or LazyRow
• ScrollView -> Modifier.verticalScroll() or Modifier.horizontalScroll()
• ViewPager -> Pager

Box

对应 FrameLayout

LinearLayout

• Column
• Row

Modifier

• padding
• margin
• clip
• background

Modifier or 函数参数

为什么有些使用函数参数（字体、文字颜色），而有些使用 Modifier。

通用的设置用 Modifier，专项的参数用函数参数。

点击事件

Modifier or 独立参数都可以。

• Modifier.clickable {}
• 有 padding 的时候，需要注意 clickable 的位置，在 Compose 中，Modifier 的调用顺序是有影响的。

Button(onClick = {}) {
    Text("Hello World!")
}

边距 padding & margin & background

在 Compose 中，Margin 和 Padding 都用 Modifier.padding() 来设置。在 padding 和 margin 的区别最主要的就是在于背景色的设置。

Modifier.padding()

在 Compose 中，背景色使用 Modifier.background() 进行设置。在 Compose 中实现 Margin:

// 背景色不包括 padding 的部分，效果类似 margin
Text(text = "Compose 学习", modifier = Modifier
    .padding(8.dp)
    .background(Color.Green))

// 背景色包括 padding 的部分，效果类似 padding
Text(text = "Compose 学习", modifier = Modifier
    .background(Color.Green)
    .padding(8.dp))

// 同时设置了 padding 和 margin 的效果
Text(
    text = "Compose 学习", modifier = Modifier
        .padding(8.dp)
        .background(Color.Green)
        .padding(8.dp)
)

background 还可以传入 shape 参数，来设置不同的背景形状。Shape 对象也是一个通用的能力，例如，可以用于 clip 当中，进行裁切。

尺寸设置

• layout_width & layout_height -> Modifier.size() or (Modifier.width() & Modifier.height())
• 默认是 wrap_content
• match_parent -> Modifier.fillMaxWidth() or Modifier.fillMaxHeight()

文字大小

文字大小使用函数参数(fontSize)设置，而不是 Modifier

点击事件

Modifier.clickable {}

⚠️注意
clickable 的位置是有影响的（padding 前还是 padding 后），会影响点击的响应范围

groups

Compose 模块分层

image.png