Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

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

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

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

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

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

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

Компонуемый элемент 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.** Диалоговое окно с кнопками.

Composable-функция Dialog

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

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

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

Ниже приведен пример базовой реализации 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.** Минимальное количество диалогов.

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

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

@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