2021 鐵人賽 一天一腳步，30天學會 Android Compose UI！
今年的疫情蠻嚴重的，希望大家都過得安好，希望疫情快點過去，能回到一些線下技術聚會的時光～
今天目標：了解 Compose UI 上 Dialog 怎麼使用。
Dialog 是 App 使用互動上常常遇到的功能，今天就來研究一下怎麼呼叫出 Dialog 功能以及一些原本Android熟悉的 Dialog使用方法怎麼在 Compose 上實現。
查了一下 Dialog 的使用（如參考），非常直接跟簡單，程式碼如下：
@Composable
fun AlertDialogSample() {
MaterialTheme {
Column(Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally) {
val openDialog = remember { mutableStateOf(false) }
Button(onClick = {
openDialog.value = true
}) {
Text("Click me")
}
if (openDialog.value) {
AlertDialog(
onDismissRequest = {
// Dismiss the dialog when the user clicks outside the dialog or on the back
// button. If you want to disable that functionality, simply use an empty
// onCloseRequest.
openDialog.value = false
},
title = { Text(text = "Dialog Title") },
text = { Text("Here is a text ") },
confirmButton = {
Button( onClick = {
openDialog.value = false
}) {
Text("This is the Confirm Button")
}
},
dismissButton = {
Button(
onClick = {
openDialog.value = false
}) {
Text("This is the dismiss Button")
}
}
)
}
}
}
}
顯示如上二圖，看了一下也超級簡單！
今天就這樣結束吧！
等等，有幾行程式碼是以前沒看過的，這些不用暸解一下嗎？HAHA！
當然要，什麼是 remember？
查了一下相關資料，原來因為 Compose UI 是宣告式語言，
如果今天你沒有定義他的顯示狀態，
那他就會沒有任何顯示上的改變（因為沒有定義要改變成什麼狀態）。
所以Compose UI就提供了開發者用於記錄狀態的 remember 函式，
你可以在這個函式裡面去宣告你要定義的變數，
且使用者在使用的時候可以去變更這個狀態，
然後你只需要定義清楚每個狀態下UI應該如何顯示即可。
@Composable
fun textFieldStateHasTextShow() {
var value by remember {
mutableStateOf("") } Box(modifier = Modifier.fillMaxSize(1f), contentAlignment = Alignment.Center) {
OutlinedTextField(
value = value,
onValueChange = {
value = it
},
label = { Text("Name") }
)
}
Box(modifier = Modifier.fillMaxSize().padding(4.dp),contentAlignment = Alignment.TopCenter,){
Text(value)
}
}
宣告了一個字串，讓Text 可以讀取這個字串去顯示，
而 OutlinedTextField 的部分則是拿來輸入使用者想要顯示在 Text 上的元件。
了解了 remember 跟 dialog 後，
就可以開始實作一些想與使用者互動且產生畫面變化的行為了。
如果沒問題的話，明天見囉：）
參考資料：https://foso.github.io/Jetpack-Compose-Playground/material/alertdialog/
參考資料：https://juejin.cn/post/7000137483220418590
本文同步發表在 iT邦幫忙 上 文章連結
