前言

今天我們來講一下Jetpack Compose的退出視窗該如何實作

BackHandler

為了實現退出視窗的功能，我們要用到BackHandler，BackHandler是Jetpack Compose提供的一個組件，用來攔截 Android 應用中的返回鍵事件。它可以讓你在@Composable函數中定義自訂的返回鍵行為，取代預設的返回行為。在典型的APP應用中，當使用者按下返回鍵時，系統會根據當前的Activity狀態來決定要執行什麼操作，例如返回上一個頁面或退出應用。而使用 BackHandler，我們可以攔截這個事件並執行自訂的邏輯。
範例的程式碼如下

-kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.compose.BackHandler
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.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExitConfirmationApp()
        }
    }
}

@Composable
fun ExitConfirmationApp() {
    var showExitDialog by remember { mutableStateOf(false) }
    val context = LocalContext.current

    BackHandler {
        showExitDialog = true
    }

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "按返回鍵退出應用")
    }

    if (showExitDialog) {
        AlertDialog(
            onDismissRequest = { showExitDialog = false },
            title = { Text(text = "退出應用") },
            text = { Text(text = "您確定要退出應用嗎？") },
            confirmButton = {
                Button(
                    onClick = {
                        showExitDialog = false
                        // 使用已取得的 context 來結束 Activity
                        (context as? ComponentActivity)?.finish()
                    }
                ) {
                    Text("是")
                }
            },
            dismissButton = {
                Button(
                    onClick = { showExitDialog = false }
                ) {
                    Text("否")
                }
            }
        )
    }
}

@Preview(showBackground = true)
@Composable
fun ExitConfirmationAppPreview() {
    ExitConfirmationApp()
}

在上面的範例中，我們使用了BackHandler來攔截返回鍵的事件。當使用者按下返回鍵時，BackHandler的回調會被觸發，進而設定showExitDialog為true，這表示我們想要顯示一個確認對話框，而不是直接結束應用程式。當我們按下是時他會觸發(context as? ComponentActivity)?.finish()，他是用於在 Jetpack Compose 中從 Composable 函數內部結束當前的 Activity。
呈現效果如下

後話

今天我們簡單的弄一下退出視窗的功能，並透過(context as? ComponentActivity)?.finish()來安全的退出APP，今天的內容就到這邊，我們明天再見