阿里大牛又一波騷操作,安卓UI開發新技能-Jetpack Compose，絕了

Jetpack Compose是什麼?

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

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

官方Demo：https://github.com/android/compose-samples/tree/master/JetNews

官方入門指導: 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. 文本顯示

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

2. 文本輸入框

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

3. 按鈕

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

4.彈出框

<code>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
            )
        }
    }
}/<code>

5. 開關

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

6. 單選框

<code>MaterialTheme {
    RadioButton(selected = true,
            onSelect = { }
    )
}/<code>

7. 複選框

<code>MaterialTheme {
    val checkedState = +state { true }
    Checkbox(
            checked = checkedState.value, 

            onCheckedChange = { checkedState.value = it }
    )
}/<code>

8. 單選框組

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

9.圖片

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

源代碼

https://github.com/cxyzy1/Jetpack-Compose-Demos

文章不易，如果大家喜歡這篇文章，或者對你有幫助希望大家多多，點贊，轉發，關注 哦。文章會持續更新的。絕對乾貨！！！

閱讀更多 Android進階小劉 的文章

關鍵字: DIALOG 新技能 Studio