今年的疫情蠻嚴重的，希望大家都過得安好，希望疫情快點過去，能回到一些線下技術聚會的時光～

今天目標：了解 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")
                            } 
												}
										)
							}
					}
        }
    }

顯示 Click me Button

按下Button後顯示的Dialog

如上二圖，看了一下也超級簡單！
今天就這樣結束吧！

等等，有幾行程式碼是以前沒看過的，這些不用暸解一下嗎？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

本文同步發表在 Medium 上 文章連結