用 Compose 寫出一個(gè)簡單界面

Compose 一些基本概念問題

1. Compose 獨(dú)立于平臺
   1. 不依賴于 android 更新，可以獨(dú)立發(fā)布: ConstraintLayout, AppCompat, ViewModel, RecyclerView 等
   2. Compose 更激進(jìn)，獨(dú)立于 Android，與 Android 無關(guān)，可以跨平臺
   3. 獨(dú)立于平臺的一個(gè)最明顯的用處就是在 Android Studio 中可以進(jìn)行更強(qiáng)大的預(yù)覽功能
   4. 目前 Compose 支持 PC 已經(jīng)進(jìn)入 beta 版、也正在推進(jìn) Web 端
2. 聲明式 UI
   1. 只需要對界面進(jìn)行一次性的聲明，而不需要在不同條件下對界面進(jìn)行操作。

簡單控件

Compose 中，界面需要在 setContent{} 中進(jìn)行寫。

Text

Text("Mlya")

Image

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

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

加載網(wǎng)絡(luò)圖片

• Coil: Coroutine Image Loader
  • 使用了 Kotlin 協(xié)程
  • 不是面向 View 系統(tǒng)的
  • 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)
)

基礎(chǔ)布局

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

Box

對應(yīng) FrameLayout

LinearLayout

• Column
• Row

Modifier

• padding
• margin
• clip
• background

Modifier or 函數(shù)參數(shù)

為什么有些使用函數(shù)參數(shù)（字體、文字顏色），而有些使用 Modifier。

通用的設(shè)置用 Modifier，專項(xiàng)的參數(shù)用函數(shù)參數(shù)。

點(diǎn)擊事件

Modifier or 獨(dú)立參數(shù)都可以。

• Modifier.clickable {}
• 有 padding 的時(shí)候，需要注意 clickable 的位置，在 Compose 中，Modifier 的調(diào)用順序是有影響的。

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

邊距 padding & margin & background

在 Compose 中，Margin 和 Padding 都用 Modifier.padding() 來設(shè)置。在 padding 和 margin 的區(qū)別最主要的就是在于背景色的設(shè)置。

Modifier.padding()

在 Compose 中，背景色使用 Modifier.background() 進(jìn)行設(shè)置。在 Compose 中實(shí)現(xiàn) Margin:

// 背景色不包括 padding 的部分，效果類似 margin
Text(text = "Compose 學(xué)習(xí)", modifier = Modifier
    .padding(8.dp)
    .background(Color.Green))

// 背景色包括 padding 的部分，效果類似 padding
Text(text = "Compose 學(xué)習(xí)", modifier = Modifier
    .background(Color.Green)
    .padding(8.dp))

// 同時(shí)設(shè)置了 padding 和 margin 的效果
Text(
    text = "Compose 學(xué)習(xí)", modifier = Modifier
        .padding(8.dp)
        .background(Color.Green)
        .padding(8.dp)
)

background 還可以傳入 shape 參數(shù)，來設(shè)置不同的背景形狀。Shape 對象也是一個(gè)通用的能力，例如，可以用于 clip 當(dāng)中，進(jìn)行裁切。

尺寸設(shè)置

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

文字大小

文字大小使用函數(shù)參數(shù)(fontSize)設(shè)置，而不是 Modifier

點(diǎn)擊事件

Modifier.clickable {}

??注意
clickable 的位置是有影響的（padding 前還是 padding 后），會影響點(diǎn)擊的響應(yīng)范圍

groups

Compose 模塊分層

image.png