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

Компонент AlertDialog представляет диалоговое окно, которое прерывает работу пользователя, отображая некоторую важную информацию. Этот компонент имеет следующее определение:

@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: (@Composable () -> Unit)? = null,
    icon: (@Composable () -> Unit)? = null,
    title: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    shape: Shape = AlertDialogDefaults.shape,
    containerColor: Color = AlertDialogDefaults.containerColor,
    iconContentColor: Color = AlertDialogDefaults.iconContentColor,
    titleContentColor: Color = AlertDialogDefaults.titleContentColor,
    textContentColor: Color = AlertDialogDefaults.textContentColor,
    tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
    properties: DialogProperties = DialogProperties()
): Unit

Параметры компонента:

• onDismissRequest: представляет функцию типа () -> Unit, которая выполняется, когда пользователь пытается закрыть диалоговое окно, нажав на область вне окна или на кнопку Назад.

• confirmButton: представляет функцию типа () -> Unit, в которой устанавливается кнопка подтверждения действия.

• modifier: объект типа Modifier, который задает модификаторы компонента

• dismissButton: представляет функцию типа () -> Unit, в которой устанавливается кнопка отмены действия.

• icon: иконка, которая отображается над заголовков или текстом

• title: устанавливает заголовок диалогового окна

• text: устанавливает текст диалогового окна

• shape: устанавливает форму диалогового окна в виде объекта Shape

• containerColor: устанавливает фоновый цвет окна

• iconContentColor: устанавливает цвет для иконки

• titleContentColor: устанавливает цвет заголовка окна

• textContentColor: устанавливает цвет текста окна

• tonalElevation: устанавливает эффект анимации

• properties: дополнительные свойства для настройки окна, которые представляют объект DialogProperties

Для создания диалогового окна достаточно установить параметры onDismissRequest и confirmButton.

Определим простейшее диалоговое окно:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val openDialog = remember { mutableStateOf(false) }
            Button({ openDialog.value = true }) {
                Text("Удалить", fontSize = 22.sp)
            }
            if (openDialog.value) {
                AlertDialog(
                    onDismissRequest = { openDialog.value = false},
                    title = { Text(text = "Подтверждение действия") },
                    text = { Text("Вы действительно хотите удалить выбранный элемент?") },
                    confirmButton = {
                        Button({ openDialog.value = false }) {
                            Text("OK", fontSize = 22.sp)
                        }
                    }
                )
            }
        }
    }
}

Для управления отображением окна здесь определена переменная openDialog. Если она равна true, то диалоговое окно отображается. По умолчанию она равна false, поэтому при загрузке приложения мы не увидим окна на экране.

Нажав на кнопку с надписью "Удалить", мы изменим значение переменной openDialog на true и тем самым отобразим окно.

Нажав на кнопку "OK" внутри диалогового окна (срабатывает функция onClick кнопки) или на область вне окна (срабатывает функция из параметра onDismissRequest) значение переменной openDialog будет переключено обратно на false, и диалоговое окно исчезнет.

Подобным образом можно настроить и другие аспекты окна. Например, добавим еще кнопку:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val openDialog = remember { mutableStateOf(false) }
            val buttonColors = ButtonDefaults.buttonColors(containerColor = Color.DarkGray, contentColor = Color.LightGray)
            Button({ openDialog.value = true }, colors = buttonColors) {
                Text("Удалить", fontSize = 22.sp)
            }
            if (openDialog.value) {
                AlertDialog(
                    onDismissRequest = { openDialog.value = false},
                    title = { Text(text = "Подтверждение действия") },
                    text = { Text("Вы действительно хотите удалить выбранный элемент?") },
                    confirmButton = {
                        Button({ openDialog.value = false }, colors = buttonColors, border = BorderStroke(1.dp, Color.LightGray)) {
                            Text("Удалить", fontSize = 22.sp)
                        }
                    },
                    dismissButton = {
                        Button(
                            onClick = { openDialog.value = false }, colors = buttonColors, border = BorderStroke(1.dp, Color.LightGray)) {
                            Text("Отмена", fontSize = 22.sp)
                        }
                    },
                    containerColor = Color.DarkGray,
                    titleContentColor = Color.LightGray,
                    textContentColor = Color.LightGray,
                    iconContentColor = Color.LightGray
                )
            }
        }
    }
}

Единственное что стоит отметить, что кнопка dismissedButton отображается перед кнопки confirmButton.