Android Studio

タスク削除の際に確認ダイアログを表示する

  /

タスク削除の際に確認ダイアログを表示する

これを実装するには、以下のことを行います。

  1. 確認ダイアログの表示状態を管理する
    どのタスクの削除を確認しているか、そしてダイアログが表示されているかを管理するための状態変数を導入します。
  2. 削除ボタンのクリック時にダイアログを表示する
    削除ボタンが押されたときに、直接削除するのではなく、確認ダイアログを表示するようにします。
  3. 確認ダイアログのComposableを作成する
    「はい」と「いいえ」のボタンを持つダイアログを作成し、「はい」が押されたら削除を実行し、「いいえ」が押されたらダイアログを閉じるようにします。

具体的な手順

MainActivity.kt ファイルの TodoListScreen 関数を編集していきます。

1. 必要なimportを追加

ファイルの先頭あたりに、以下を追加してください。（既にあるものもあるかもしれません）

import androidx.compose.material3.AlertDialog // 確認ダイアログ用
import androidx.compose.material3.TextButton // ダイアログ内のボタン用

2. TodoListScreen にダイアログの状態変数を追加する

TodoListScreen 関数の一番上の、状態変数を定義しているブロックに以下を追加します。

// ... (既存の状態変数) ...

    // 削除確認ダイアログの表示状態
    var showDeleteConfirmationDialog by remember { mutableStateOf(false) }
    // 削除対象のタスクIDを保持
    var itemToDeleteId by remember { mutableStateOf<Long?>(null) }
  • showDeleteConfirmationDialog: true の場合、削除確認ダイアログが表示されます。
  • itemToDeleteId: 削除を確認中のタスクの id を一時的に保持します。

3. 削除ボタンのクリックロジックを変更する

LazyColumn の中で、各 TodoItem の削除ボタン (IconButton(onClick = { Icons.Filled.Delete … })) の onClick ラムダを以下のように変更します。

// 通常表示モードの場合の削除ボタン
IconButton(onClick = {
    // 削除ボタンが押されたら、確認ダイアログを表示し、削除対象のIDをセット
    itemToDeleteId = item.id
    showDeleteConfirmationDialog = true
}) {
    Icon(Icons.Filled.Delete, contentDescription = "削除")
}

4. 削除確認ダイアログのComposableを追加する

TodoListScreen 関数の一番下、Button(onClick = { navController.popBackStack() }) の下あたりに、以下の if ブロックを追加します。

// ... (省略: 一番下の「戻る」ボタン) ...
    }

    // 削除確認ダイアログ
    if (showDeleteConfirmationDialog) {
        AlertDialog(
            onDismissRequest = {
                // ダイアログ外をタップした場合、ダイアログを閉じる
                showDeleteConfirmationDialog = false
                itemToDeleteId = null // IDもクリア
            },
            title = { Text("タスクの削除") },
            text = { Text("このタスクを削除してもよろしいですか？") },
            confirmButton = {
                TextButton(
                    onClick = {
                        // 「はい」が押された場合、タスクを削除
                        itemToDeleteId?.let { id ->
                            todoItems = todoItems.filter { it.id != id }.toMutableList()
                        }
                        showDeleteConfirmationDialog = false
                        itemToDeleteId = null
                    }
                ) {
                    Text("はい")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        // 「いいえ」が押された場合、ダイアログを閉じるだけ
                        showDeleteConfirmationDialog = false
                        itemToDeleteId = null
                    }
                ) {
                    Text("いいえ")
                }
            }
        )
    }
} // TodoListScreen関数の終わり
  • AlertDialog: 確認ダイアログを表示するためのComposableです。
  • onDismissRequest: ダイアログの外側をタップしたり、バックボタンを押したりしたときに呼び出されます。ここではダイアログを閉じ、削除対象のIDをクリアしています。
  • title, text: ダイアログのタイトルとメッセージです。
  • confirmButton: 「はい」ボタンです。クリックされたら、itemToDeleteId を使って実際にリストから項目を削除し、ダイアログを閉じます。
  • dismissButton: 「いいえ」ボタンです。クリックされたら、ダイアログを閉じるだけです。

これで、アプリを再実行すると、ToDoリストの項目を削除しようとすると、まず確認ダイアログが表示され、「はい」を押した場合のみタスクが削除されるようになります！

※Google AI Studioによる回答を参考にしました

目次に戻る