Jetpack Composes 學習【06】 Alertdialog

Alertdialog

坦白說，AlertDialog我在工作中用得并不多，因為AlertDialog的樣式比較固定和呆闆，為了和App的整體設計比對，一般都是使用自定義的Dialog，隻有在要求不高時用一下。但是作為Android的基礎控件之一，掌握它是十分有必要，是以決定寫一篇自己的部落格。

大家可以通過下面的參數基本可以做到見名之意。

@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: () -> Unit = null,
    title: () -> Unit = null,
    text: () -> Unit = null,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    properties: DialogProperties = DialogProperties()
): @Composable Unit      

1. 簡單使用

val openDialog = remember { mutableStateOf(true) }

if (openDialog.value) {
    AlertDialog(
        onDismissRequest = {
            // 當使用者點選對話框以外的地方或者按下系統傳回鍵将會執行的代碼
            openDialog.value = false
        },
        title = {
            Text(
                text = "開啟位置服務",
                fontWeight = FontWeight.W700,
                style = MaterialTheme.typography.h6
            )
        },
        text = {
            Text(
                text = "這将意味着，我們會給您提供精準的位置服務，并且您将接受關于您訂閱的位置資訊",
                fontSize = 16.sp
            )
        },
        confirmButton = {
            TextButton(
                onClick = {
                    openDialog.value = false
                },
            ) {
                Text(
                    "确認",
                    fontWeight = FontWeight.W700,
                    style = MaterialTheme.typography.button
                )
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    openDialog.value = false
                }
            ) {
                Text(
                    "取消",
                    fontWeight = FontWeight.W700,
                    style = MaterialTheme.typography.button
                )
            }
        }
    )
}      

如果一切順利，運作程式，您将會看到：

​

​AlertDialog​

​ 将根據可用空間來定位其按鈕。預設情況下，它将嘗試将它們水準地放在彼此的旁邊，如果沒有足夠的空間，則退回到水準放置。還有另一個版本的 Composable，它有一個按鈕槽，可以提供自定義的按鈕布局

@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    buttons: () -> Unit,
    modifier: Modifier = Modifier,
    title: () -> Unit = null,
    text: () -> Unit = null,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    properties: DialogProperties = DialogProperties()
): @Composable Unit      

簡單的一個實作代碼：

val openDialog = remember { mutableStateOf(true) }

if (openDialog.value) {
    AlertDialog(
        onDismissRequest = {
            openDialog.value = false
        },
        title = {
            Text(
                text = "開啟位置服務",
                fontWeight = FontWeight.W700,
                style = MaterialTheme.typography.h6
            )
        },
        text = {
            Text(
                text = "這将意味着，我們會給您提供精準的位置服務，并且您将接受關于您訂閱的位置資訊",
                fontSize = 16.sp
            )
        },
        buttons = {
            Row(
                modifier = Modifier.padding(all = 8.dp),
                horizontalArrangement = Arrangement.Center
            ) {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { openDialog.value = false }
                ) {
                    Text("必須接受！")
                }
            }
        }
    )
}      

2. Dialog

​

​AlertDialog​

​ 在一些情況下有可能還是無法滿足我們的業務要求，這時候我們就可以使用更底層的一個 @Composable 函數 —— Dialog

var flag by remember{ mutableStateOf(false) }
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Button(
        onClick = { flag = true }
    ) {
        Text("彈窗")
    }
}
if(flag) {
    Dialog(
        onDismissRequest = { flag = false }
    ) {
        Box(
            modifier = Modifier
                .size(300.dp)
                .background(Color.White),
            contentAlignment = Alignment.Center
        ) {
            Column {
                LinearProgressIndicator()
                Text("加載中 ing...")
            }
        }
    }
}      

3. 更多