用 Compose 寫出一個簡單界面

Compose 一些基本概念問題

1. Compose 獨立于平臺
   1. 不依賴于 android 更新曙求，可以獨立發(fā)布: 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 協(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)
)

基礎布局

• 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 的區(qū)別最主要的就是在于背景色的設置岛啸。

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