Zenn
Open1

新しいAlertDialog

Kotlin
Android Studio
メッセージ
Jetpack Compose
ダイアログ
るるすたるるすた

:::
ちょっとしたメッセージを表示したいことがよくあります。
例えば、「本当に削除しますがよろしいでしょうか？→はい、いいえ」みたいなやつ。
意外と設定項目が多いので、記録しておく。
AlertDialogとBasicAlertDialog（こっちのが新しい）の2つ。
見た目にこだわりたい場合はBasicAlertDialog。
:::

AlertDialog

プロパティ

プロパティ 説明
onDismissRuquest キャンセル時の処理
confirmButton 確認ボタンの仕様（どういうボタンか？表示テキストは？）
dismissButton キャンセルボタンの仕様（どういうボタンか？表示テキストは？）
title タイトル名
text 表示するもの：テキスト、画像等のコンポーザブル

コードの例

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ColorSelectDialog(
    initialColor: Color,
    onColorSelected: (Color) -> Unit,
    onDismiss: () -> Unit,
) {
    var color by remember { mutableStateOf(initialColor) }
    val controller = rememberColorPickerController()

    AlertDialog(
        onDismissRequest = onDismiss,
        confirmButton = {
            TextButton(onClick = {onColorSelected(color)}) {
                Text("OK")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) {
                Text("Cancel")
            }
        },
        title = { Text("Select a color") },
        text = {
            Column {
                HsvColorPicker(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(200.dp),
                    controller = controller,
                    onColorChanged = {
                        color = it.color
                    }
                )
                Spacer(modifier = Modifier.height(dimensionResource(R.dimen.p_medium)))
                BrightnessSlider(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(32.dp)
                        .padding(horizontal = dimensionResource(R.dimen.p_small)),
                    controller = controller,
                )
            }
            Box(
                modifier = Modifier
                    .size(width = 48.dp, height = 32.dp)
                    .background(color)
                    .clickable { onColorSelected(color) }
            )
        }
    )
}

BasicAlertDialog