Jetpack Compose：安卓UI開發新技能，掌握這個領先一大步

Jetpack Compose是什麼?

Jetpack Compose 是安卓用於構建UI的一種新方式,採用程式碼而非xml檔案方式，寫法與Flutter非常相似。

官方主頁： https://developer.android.google.cn/jetpack/compose

官方Demo：

官方入門指導:  https://developer.android.google.cn/jetpack/compose/tutorial

約束條件

1. Android Studio: 4.0及以上
2. 支援安卓版本:Android API 21(即5.0)及以上
3. 必須使用kotlin語言

優點

1. 程式碼更少 少了xml,少了activity和xml之間的關聯.
2. 雙向繫結 資料變化了,UI就自動變化.

缺點

1. 含有引數的Composable函式不能直接預覽.
2. Composable函式必須新增@Preview註解才能預覽.
3. 程式碼修改後,需要重新編譯才能預覽.
4. 目前還不完善,相比於Flutter,還處於幼兒園水平.
5. 相比於xml畫頁面佈局,效率會有降低.

常見控制元件使用樣例

1. 文字顯示

  Text(text = "眾鳥高飛盡，孤雲獨去閒。相看兩不厭，只有敬亭山。")

1. 文字輸入框

  val state = +state { "Text Field to input" }TextField(        value = state.value,        onValueChange = { state.value = it })

1. 按鈕

Button(text = "咬我啊", onClick = { Log.v("test", "被咬了") })

4.彈出框

  MaterialTheme {
      Column {
          val openDialog = +state { false }
          Button("Click me", onClick = {
              openDialog.value = true
          })          if (openDialog.value) {
              AlertDialog(
                      onCloseRequest = {
                          openDialog.value = false
                      },
                      title = {
                          Text(text = "Alert Dialog Title")
                      },
                      text = {
                          Text("Alert Dialog content")
                      },
                      confirmButton = {
                          Button(                                  "Confirm",
                                  onClick = {
                                      openDialog.value = false
                                  })
                      },
                      dismissButton = {
                          Button(                                  "Cancel",
                                  onClick = {
                                      openDialog.value = false
                                  })
                      },
                      buttonLayout = AlertDialogButtonLayout.Stacked
              )
          }
      }
  }

1. 開關

  MaterialTheme {
      val checkedState = +state { true }      Switch(
              checked = checkedState.value,
              onCheckedChange = { checkedState.value = it }
      )
  }

1. 單選框

  MaterialTheme {
      RadioButton(selected = true,
              onSelect = { }
      )
  }

1. 核取方塊

  MaterialTheme {
      val checkedState = +state { true }
      Checkbox(
              checked = checkedState.value,
              onCheckedChange = { checkedState.value = it }
      )
  }

1. 單選框組

  MaterialTheme {
      val radioOptions = listOf("A", "B", "C")
      val (selectedOption, onOptionSelected) = +state { radioOptions[0] }
      RadioGroup(
              options = radioOptions,
              selectedOption = selectedOption,
              onSelectedChange = onOptionSelected
      )
  }

9.圖片

  Container(modifier = Height(300.dp) wraps Expanded) {
      Clip(shape = RoundedCornerShape(4.dp)) {
          DrawImage(+imageResource(R.drawable.img_0))
      }
  }

我們Android程式設計師，要學的東西有很多，要想不被環境淘汰就只有不斷提升自己，從來都是我們去適應環境，而不是環境來適應我們！

附上我的Android核心技術學習大綱，獲取相關內容來我的GitHub一起玩耍：
vx：xx13414521