Đích đến của hộp thoại

Trong hoạt động điều hướng trên Android, thuật ngữ đích đến của hộp thoại dùng để chỉ các đích đến trong biểu đồ điều hướng của ứng dụng, dưới dạng cửa sổ hộp thoại, phủ lên các phần tử và nội dung trên giao diện người dùng của ứng dụng.

Bởi vì đích đến của hộp thoại xuất hiện trên các đích đến được lưu trữ lấp đầy máy chủ điều hướng, có một số cân nhắc quan trọng về cách hộp thoại đích đến tương tác với ngăn xếp lui của NavController.

Thành phần kết hợp của hộp thoại

Để tạo đích đến của hộp thoại trong Compose, hãy thêm đích đến vào NavHost bằng cách sử dụng hàm dialog(). Về cơ bản, hàm này hoạt động giống như composable, chỉ khác là hàm này tạo đích đến của hộp thoại thay vì đích đến được lưu trữ.

Hãy xem ví dụ sau đây:

@Serializable
object Home
@Serializable
object Settings
@Composable
fun HomeScreen(onNavigateToSettings: () -> Unit){
    Column {
        Text("Home")
        Button(onClick = onNavigateToSettings){
            Text("Open settings")
        }
    }
}

// This screen will be displayed as a dialog
@Composable
fun SettingsScreen(){
    Text("Settings")
    // ...
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = Home) {
        composable<Home> { HomeScreen(onNavigateToSettings = { navController.navigate(route = Settings) }) }
        dialog<Settings> { SettingsScreen() }
    }
}

1. Đích đến bắt đầu sử dụng tuyến Home. Bởi vì composable() thêm đích đến này vào biểu đồ, đây là một đích đến được lưu trữ.
2. Đích đến còn lại sử dụng tuyến Settings.
   • Tương tự, vì dialog() thêm hàm này vào biểu đồ nên đây là một hộp thoại đích.
   • Khi người dùng điều hướng từ HomeScreen đến SettingsScreen, xuất hiện trên HomeScreen.
3. Mặc dù SettingsScreen không bao gồm chính thành phần kết hợp Dialog, nhưng vì đây là đích đến của hộp thoại, nên NavHost sẽ hiển thị thành phần kết hợp đó trong Dialog.

Đích đến của hộp thoại xuất hiện trên đích đến trước đó trong NavHost. Sử dụng khi hộp thoại biểu thị một màn hình riêng trong ứng dụng cần màn hình riêng đó vòng đời và trạng thái đã lưu, độc lập với mọi đích đến khác trong biểu đồ điều hướng. Bạn nên dùng AlertDialog hoặc thành phần kết hợp có liên quan nếu muốn hộp thoại cho lời nhắc ít phức tạp hơn, chẳng hạn như một thông báo xác nhận.

Kotlin DSL

Nếu bạn làm việc với các mảnh và đang sử dụng Kotlin DSL để tạo biểu đồ, thì việc thêm đích đến của hộp thoại cũng tương tự như khi sử dụng Compose.

Hãy cân nhắc cách sử dụng hàm dialog() trong đoạn mã sau để thêm đích đến của hộp thoại dùng một mảnh:

// Define destinations with serializable classes or objects
@Serializable
object Home
@Serializable
object Settings

// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
    startDestination = Home
) {
    // Associate the home route with the HomeFragment.
    fragment<HomeFragment, Home> {
        label = "Home"
    }

    // Define the settings destination as a dialog using DialogFragment.
    dialog<SettingsFragment, Settings> {
        label = "Settings"
    }
}

XML

Nếu bạn đã có sẵn DialogFragment, hãy dùng phần tử <dialog> để thêm hộp thoại vào biểu đồ điều hướng như trong ví dụ sau:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/nav_graph">

...

<dialog
    android:id="@+id/my_dialog_fragment"
    android:name="androidx.navigation.myapp.MyDialogFragment">
    <argument android:name="myarg" android:defaultValue="@null" />
        <action
            android:id="@+id/myaction"
            app:destination="@+id/another_destination"/>
</dialog>

...

</navigation>