Đí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.

Vì đích đến của hộp thoại xuất hiện trên đích đến được lưu trữ lấp đầy máy chủ lưu trữ điều hướng, nên có một số điểm quan trọng cần cân nhắc liên quan đến cách đích đến của hộp thoại 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. Vì composable() thêm nó vào biểu đồ, nên nó là một đích đến được lưu trữ.
  2. Đích đến khác sử dụng tuyến Settings.
    • Tương tự, vì dialog() thêm nó vào biểu đồ, nên nó là một đích đến của hộp thoại.
    • Khi người dùng chuyển từ HomeScreen đến SettingsScreen, vĩ độ này sẽ xuất hiện phía 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. Hãy sử dụng chúng khi hộp thoại biểu thị một màn hình riêng biệt trong ứng dụng của bạn, cần có vòng đời và trạng thái đã lưu riêng, độ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ó DialogFragment, hãy sử 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>