技術標籤：Jetpack-ComposeJetpackComposeAlertDialogdialog

Jetpack Compose - AlertDialog

• • 0、介紹
  • 1、屬性一覽
  • 2、使用示例
  • 3、版本更新
  • 4、未解決問題

Compose系列文章，請點原文閱讀。原文，是時候學習Compose了！

0、介紹

AlertDialog是一個用緊急資訊，詳細資訊或操作打斷使用者的對話方塊。

1、屬性一覽

【目前基於alpha09版本】請看該對話方塊支援的兩個函式，首先看第一個函式，該函式會根據可用空間水平放置其按鈕：

@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? = null
): Unit
 

@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? = null
): Unit
 

屬性引數含義：

第二個函式如下：

@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? = null
): Unit

跟第一個函式的區別在於按鈕可以自定義了：

2、使用示例

程式碼如下：

@Composable
fun DialogDemo() {
    val openDialog = remember { mutableStateOf(true) }

    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = {
                openDialog.value = false
            },
            title = {
                Text(text = "這是對話方塊標題")
            },
            text = {
                Text(
                    "這是一段描述對話方塊提示內容的文字， " +
                            "這個文字有點長，還有點俏皮！"
                )
            },
            confirmButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("確認")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("取消")
                }
            }
        )
    }
}

實現效果如下所示：

關於第二個函式就是自定義按鈕了，你可以使用Row、Column等佈局來實現各種擺放方式不同的按鈕，這裡不再示例。

當我們檢視AlertDialog原始碼的時候我們可以發現，第一個函式繼承自第二個函式，而第二個函式又繼承自androidx.compose.ui.window.Dialog，當我們需要自定義特殊對話方塊樣式的時候就可以繼承自該函式。

3、版本更新

• 暫無

4、未解決問題

暫無。在之前的話我們如果要在工具類中彈出對話方塊，需要獲取到頂層的Activity等，然後判斷是否在銷燬狀態各種的然後才可以確保能正確彈出對話方塊。但是通過Compose的對話方塊我們發現，完全沒有Context的要求了，但是別高興太早，AlertDialog要求我們只能在Compose函式中使用，這又是一個障礙。