Jetpack Compose-确认弹窗

发表于 | 分类于
Jetpack Compose-确认弹窗

前言

当我们做一些需要确认的操作的时候，需要弹出确认弹窗，防止误操作。

系统自带

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 控制弹窗显示状态
var showQuitDialog by remember { mutableStateOf(false) }   

if (showQuitDialog) {
    AlertDialog(
        onDismissRequest = { showQuitDialog = false },
        title = { Text("提示") },
        text = { Text("确定要返回上一页吗？") },
        confirmButton = {
            Button(onClick = {
                showQuitDialog = false
                // 手动触发返回上一页（若不调用，返回事件会被消费，页面不会回退）
                navController.popBackStack()
            }) {
                Text("退出")
            }
        },
        dismissButton = {
            Button(onClick = { showQuitDialog = false }) {
                Text("取消")
            }
        }
    )
}

自定义弹窗

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
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.xhkjedu.zxs_android.common.CommonTheme


@Composable
fun ZAlertDialog(
    title: String = "提示",
    content: String = "确认要退出吗？",
    closeClick: () -> Unit,
    okClick: () -> Unit
) {

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(CommonTheme.ColorBlackMainTouming),
        contentAlignment = Alignment.Center
    ) {
        Column(
            Modifier
                .width(394.dp)
                .wrapContentHeight()
                .clip(CommonTheme.CornerL)
                .background(Color.White)
        ) {
            ZDialogTitleComp(title, closeClick)

            Column(
                Modifier
                    .fillMaxWidth()
                    .padding(CommonTheme.SpaceL)
            ) {
                ZTextColorSizeComp(content, CommonTheme.ColorBlackMain, 16.sp)
            }

            Row(Modifier.align(Alignment.CenterHorizontally)) {
                Spacer(Modifier.width(CommonTheme.SpaceL))
                ZBtnMainBorder("取消") {
                    closeClick()
                }
                Spacer(Modifier.width(CommonTheme.SpaceL))
                ZBtnMainBg("确定") {
                    okClick()
                }
                Spacer(Modifier.width(CommonTheme.SpaceL))
            }
            Spacer(Modifier.height(CommonTheme.SpaceL))
        }
    }
}