Android Compose 使用 Dialog

# Android Compose 使用 Dialog

基于Compose实现的基本提示对话框和耗时进度对话框。

全部代码见GithubShanyaliux/ComposeDemo (github.com) (opens new window)

# 普通的提示对话框

代码实现：

@Composable
fun NormAlertDialogComponent(
    dialogState: MutableState<Boolean>
) {

    val context = LocalContext.current

    if (dialogState.value) {
        AlertDialog(
            onDismissRequest = { dialogState.value = false },
            title = { Text(text = "NormAlertDialogComponent") },
            text = { Text(text = "I'm an NormAlertDialog.") },
            confirmButton = {
                TextButton(onClick = {
                    dialogState.value = false
                    Toast.makeText(context, "Confirm Button Click", Toast.LENGTH_SHORT).show()
                }) {
                    Text(text = "YES")
                }
            },
            dismissButton = {
                TextButton(onClick = {
                    dialogState.value = false
                    Toast.makeText(context, "Dismiss Button Click", Toast.LENGTH_SHORT).show()
                }) {
                    Text(text = "NO")
                }
            },
            backgroundColor = Color.LightGray,
            contentColor = Color.DarkGray
        )
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

预览效果：

# 圆形无线循环进度对话框

代码实现：

@Composable
fun ProcessDialogComponent(
    dialogState: MutableState<Boolean>
) {

    if (dialogState.value) {
        Dialog(onDismissRequest = { dialogState.value = false }) {
            //圆形进度条--无限循环
            Column (
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                CircularProgressIndicator()
                Spacer(modifier = Modifier.requiredHeight(10.dp))
                Text(text = "Precessing")
            }

        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

预览效果：

# 完整代码

package cn.shanyaliux.composedemo

import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog


@Composable
fun AlertDialogDemo() {
    val openNormAlertDialog = remember {
        mutableStateOf(false)
    }
    val openProcessDialog = remember {
        mutableStateOf(false)
    }
    NormAlertDialogComponent(
        dialogState = openNormAlertDialog
    )
    ProcessDialogComponent(
        dialogState =  openProcessDialog
    )

    Column {
        Button(
            modifier = Modifier.wrapContentSize(),
            onClick = {
                openNormAlertDialog.value = !openNormAlertDialog.value
            }
        ) {
            Text(text = "OpenNormDialog")
        }

        Button(
            modifier = Modifier.wrapContentSize(),
            onClick = {
                openProcessDialog.value = !openProcessDialog.value
            }
        ) {
            Text(text = "OpenProcessDialog")
        }
    }

}

@Composable
fun NormAlertDialogComponent(
    dialogState: MutableState<Boolean>
) {

    val context = LocalContext.current

    if (dialogState.value) {
        AlertDialog(
            onDismissRequest = { dialogState.value = false },
            title = { Text(text = "NormAlertDialogComponent") },
            text = { Text(text = "I'm an NormAlertDialog.") },
            confirmButton = {
                TextButton(onClick = {
                    dialogState.value = false
                    Toast.makeText(context, "Confirm Button Click", Toast.LENGTH_SHORT).show()
                }) {
                    Text(text = "YES")
                }
            },
            dismissButton = {
                TextButton(onClick = {
                    dialogState.value = false
                    Toast.makeText(context, "Dismiss Button Click", Toast.LENGTH_SHORT).show()
                }) {
                    Text(text = "NO")
                }
            },
            backgroundColor = Color.LightGray,
            contentColor = Color.DarkGray
        )
    }
}

@Composable
fun ProcessDialogComponent(
    dialogState: MutableState<Boolean>
) {

    if (dialogState.value) {
        Dialog(onDismissRequest = { dialogState.value = false }) {
            //圆形进度条--无限循环
            Column (
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                CircularProgressIndicator()
                Spacer(modifier = Modifier.requiredHeight(10.dp))
                Text(text = "Precessing")
            }

        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

编辑

#android

上次更新: 2022/09/30, 04:53:04

Android Compose 权限请求→