Диалоговое окно

Компонент Dialog показывает диалоговые сообщения или запрашивает ввод данных пользователем на слое поверх основного контента приложения. Они прерывают работу пользователя, чтобы привлечь его внимание.

Диалоговые окна можно использовать в следующих целях:

• Подтверждение действия пользователя, например при удалении файла.
• Запрос пользовательского ввода, например в приложении со списком дел.
• Представление списка вариантов для выбора пользователем, например выбор страны в настройке профиля.

Рисунок 1. Пример диалогового окна с текстом и значками.

Диалоговое окно с оповещением

Composable-функция AlertDialog предоставляет удобный API для создания диалогового окна в стиле Material Design. В AlertDialog есть специальные параметры для обработки определенных элементов диалогового окна. Вот некоторые из них:

• title – текст, который появляется в верхней части диалогового окна.
• text – текст, который будет показан в центре диалогового окна.
• icon – изображение, которое появляется в верхней части диалогового окна.
• onDismissRequest – функция, которая вызывается, когда пользователь закрывает диалоговое окно, например нажимает за его пределами.
• dismissButton – composable-функция, которая служит кнопкой закрытия.
• confirmButton – composable-функция, которая служит кнопкой подтверждения.

В следующем примере в диалоговом окне предупреждения реализованы две кнопки: одна закрывает диалоговое окно, а другая подтверждает запрос.

@Composable
fun AlertDialogExample(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    dialogTitle: String,
    dialogText: String,
    icon: ImageVector,
) {
    AlertDialog(
        icon = {
            Icon(icon, contentDescription = "Example Icon")
        },
        title = {
            Text(text = dialogTitle)
        },
        text = {
            Text(text = dialogText)
        },
        onDismissRequest = {
            onDismissRequest()
        },
        confirmButton = {
            TextButton(
                onClick = {
                    onConfirmation()
                }
            ) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    onDismissRequest()
                }
            ) {
                Text("Dismiss")
            }
        }
    )
}
Dialog.kt

Эта реализация подразумевает родительскую composable-функцию, которая передает аргументы дочерней composable-функции следующим образом:

@Composable
fun DialogExamples() {
    // ...
    val openAlertDialog = remember { mutableStateOf(false) }

    // ...
        when {
            // ...
            openAlertDialog.value -> {
                AlertDialogExample(
                    onDismissRequest = { openAlertDialog.value = false },
                    onConfirmation = {
                        openAlertDialog.value = false
                        println("Confirmation registered") // Add logic here to handle confirmation.
                    },
                    dialogTitle = "Alert dialog example",
                    dialogText = "This is an example of an alert dialog with buttons.",
                    icon = Icons.Default.Info
                )
            }
        }
    }
}
Dialog.kt

Вот как это выглядит:

Рисунок 2. Диалоговое окно с кнопками.

Примечание. Когда пользователь нажимает любую из кнопок, диалоговое окно закрывается. Когда пользователь нажимает кнопку подтверждения, вызывается функция, которая также обрабатывает подтверждение. В этом примере это функции onDismissRequest() и onConfirmRequest().

Примечание. Если в диалоговом окне требуется более сложный набор кнопок, вы можете использовать composable-функцию Dialog и заполнить ее в более свободной форме.

Диалоговая composable-функция

Dialog – это базовая composable-функция, которая не предоставляет стилей или предопределенных слотов для контента. Это относительно простой контейнер, который вы должны заполнить контейнером, например Card. Ниже приведены некоторые ключевые параметры диалога:

• onDismissRequest – лямбда-выражение, вызываемое, когда пользователь закрывает диалоговое окно.
• properties – экземпляр DialogProperties, который предоставляет дополнительные возможности для настройки.

Внимание! В отличие от примера с AlertDialog в предыдущем разделе, вам нужно вручную указать размер и форму Dialog. Также необходимо предоставить внутренний контейнер.

Простой пример

Ниже приведен пример базовой реализации composable-функции Dialog. Обратите внимание, что в качестве дополнительного контейнера используется Card. Без Card компонент Text будет отображаться отдельно над основным контентом приложения.

@Composable
fun MinimalDialog(onDismissRequest: () -> Unit) {
    Dialog(onDismissRequest = { onDismissRequest() }) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Text(
                text = "This is a minimal dialog",
                modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.Center),
                textAlign = TextAlign.Center,
            )
        }
    }
}
Dialog.kt

Вот как это выглядит: Обратите внимание, что когда диалоговое окно открыто, основной контент приложения под ним затемнен и выделен серым цветом:

Рисунок 3. Минимум диалогов.

Расширенный пример

Ниже приведен более сложный пример реализации composable-функции Dialog. В этом случае компонент вручную реализует интерфейс, аналогичный предыдущему примеру с AlertDialog.

Внимание! Если вам нужно только показать диалоговое окно с двумя кнопками, как в этом примере, используйте AlertDialog и его более удобный API. Однако если вы хотите создать более сложное диалоговое окно, например с формами и несколькими кнопками, используйте Dialog с собственным контентом, как в примере ниже.

@Composable
fun DialogWithImage(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    painter: Painter,
    imageDescription: String,
) {
    Dialog(onDismissRequest = { onDismissRequest() }) {
        // Draw a rectangle shape with rounded corners inside the dialog
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(375.dp)
                .padding(16.dp),
            shape = RoundedCornerShape(16.dp),
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Image(
                    painter = painter,
                    contentDescription = imageDescription,
                    contentScale = ContentScale.Fit,
                    modifier = Modifier
                        .height(160.dp)
                )
                Text(
                    text = "This is a dialog with buttons and an image.",
                    modifier = Modifier.padding(16.dp),
                )
                Row(
                    modifier = Modifier
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.Center,
                ) {
                    TextButton(
                        onClick = { onDismissRequest() },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("Dismiss")
                    }
                    TextButton(
                        onClick = { onConfirmation() },
                        modifier = Modifier.padding(8.dp),
                    ) {
                        Text("Confirm")
                    }
                }
            }
        }
    }
}
Dialog.kt

Вот как это выглядит:

Рисунок 4. Диалоговое окно с изображением.

Дополнительные ресурсы

• Документация по Material UI