Kotlinプログラミング Jetpack composeでダイアログを表示するプログラム

Jetpack composeでダイアログ

Jetpack composeでダイアログを表示するサンプルプログラムです。ボタンをクリックするとダイアログが表示され、ダイアログ内のOKボタンをクリックするとテキスト表示が更新されます。今回はAlertDialogコンポーネントを使用しており、開発環境はAndroid Studio Giraffe(2022.3.1)です。

※この記事は2024/06/10時点の情報です。

※本サイトはプロモーションが含まれています。

MainActivity.kt
rememberでshowDialogとmessageの状態を監視しています。
showDialogはダイアログの表示ON・OFFを管理し、messageは表示するメッセージを管理します。これらを用いることでShow DialogボタンをクリックするとshowDialogがtrueになってダイアログが表示され、OKボタンをクリックするとメッセージが更新されます。

package com.example.dialog

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.tooling.preview.Preview
import com.example.dialog.ui.theme.DialogTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DialogTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MyDialog()
                }
            }
        }
    }
}

@Composable
fun MyDialog() {
    var showDialog by remember { mutableStateOf(false) }
    var message by remember { mutableStateOf("ダイアログを表示するには\nボタンをクリックしてください") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = message, fontSize = 20.sp, modifier = Modifier.padding(bottom = 16.dp))
        Button(
            onClick = { showDialog = true }
        ) {
            Text(text = "Show Dialog")
        }

        if (showDialog) {
            AlertDialog(
                onDismissRequest = { showDialog = false },
                confirmButton = {
                    TextButton(onClick = {
                        showDialog = false
                        message = "OKボタンが押されました"
                    }) {
                        Text("OK")
                    }
                },
                dismissButton = {
                    TextButton(onClick = { showDialog = false }) {
                        Text("Cancel")
                    }
                },
                title = { Text(text = "Myダイアログ") },
                text = { Text(text = "これはダイアログのサンプルです") }
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyDialog()
}

今回のプログラムを実行した結果です。

Jetpack composeでダイアログを表示画像その1 Jetpack composeでダイアログを表示画像その2 Jetpack composeでダイアログを表示画像その3