Day 12 Compose UI Dialog

今年的疫情蛮严重的，希望大家都过得安好，希望疫情快点过去，能回到一些线下技术聚会的时光～

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