ダイアログの表示方法について学ぶ！

Dialogコンポーザブルとは

Dialog自体は状態を持つUIの部品ではなく、ウィンドウ的なただのコンテナに過ぎない。

表示/非表示は自分で管理する必要がある。

基本の型は下記

Dialog(
    onDismissRequest = { /* 閉じる処理 */ },
    properties = DialogProperties()
) {
    // 中身のComposable
}

Dialog(
    onDismissRequest = { /* 閉じる処理 */ },
    properties = DialogProperties()
) {
    // 中身のComposable
}

onDismissRequest

こちらが一番重要で外側タップ、戻るボタン、システム的な閉じ操作が起きた時に呼ばれます。

showDialog = falseのように状態を変化させてダイアログを閉じさせます

DialogProperties

こちらはダイアログタップ時の挙動などを設定することができます。

DialogProperties(
    dismissOnClickOutside = false,
    dismissOnBackPress = false
)

DialogProperties(
    dismissOnClickOutside = false,
    dismissOnBackPress = false
)

上記を設定すると外タップや戻るボタンでも閉じなくなります

コンテンツの表示

表示するUIはDialogの第3引数としてクロージャ内にコンポーザブルを定義します。

この時remeberで管理しているダイアログ表示フラグがtrueであれば表示するなどの分岐を加えた上で表示させます。

表示/非表示の状態変化にアニメーションを挟むためにAnimatedVisivilityというComposableを利用することも可能です。