وجهات مربّع الحوار

في التنقل على Android، يشير مصطلح وجهة مربع الحوار إلى الوجهات ضمن الرسم البياني للتنقل في التطبيق والتي تكون على شكل نوافذ مربعات حوار، والتي تظهر فيها عناصر واجهة المستخدم والمحتوى.

بما أنّ وجهات مربّعات الحوار تظهر فوق الوجهات المستضافة التي تملأ مضيف التنقّل، هناك بعض الاعتبارات المهمة بشأن كيفية تفاعل وجهات الحوار مع حزمة الواجهة الخلفية لـ NavController.

يمكن إنشاء مربّع حوار

لإنشاء وجهة لمربّع حوار في ميزة "إنشاء"، أضِف وجهة إلى NavHost باستخدام الدالة dialog(). تعمل الدالة بشكل أساسي مثل composable()، ولكنها تنشئ وجهة مربّع حوار فقط وليس وجهة مستضافة.

فكّر في المثال التالي:

@Composable
fun SettingsDialog(){
    Text("Settings")
    // ...
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = "home") {
        composable("home") { Home(onNavigateToHome = { navController.navigate("home") }) }
        dialog("settings") { SettingsDialog(onNavigateToSettingsDialog = { navController.navigate("settings") }) }
    }
}
  1. وجهة البداية هي Home قابلة للإنشاء. وبما أنّها تستخدم composable()، فهي وجهة مستضافة.
  2. الوجهة الأخرى هي SettingsDialog القابل للإنشاء. وهي وجهة لمربّع الحوار لأنّ الدالة dialog() تضيفه إلى الرسم البياني. عندما ينتقل المستخدم من Home إلى SettingsDialog، يظهر الاسم الأخير فوق Home.
  3. مع أنّ SettingsDialog لا يتضمن عنصر Dialog القابل للإنشاء نفسه، لأنه وجهة مربّع حوار، يعرضه NavHost ضمن Dialog.

تظهر وجهات مربّع الحوار فوق الوجهة السابقة في NavHost. يمكنك استخدامها عندما يمثل مربع الحوار شاشة منفصلة في تطبيقك تحتاج إلى دورة حياة خاصة بها وحالتها المحفوظة، بغض النظر عن أي وجهة أخرى في الرسم البياني للتنقل. قد تفضّل استخدام AlertDialog أو عنصر قابل للإنشاء إذا كنت تريد مربّع حوار لطلب أقل تعقيدًا، مثل تأكيد.

خدمة Kotlin DSL

إذا كنت تعمل على الأجزاء وكنت تستخدم Kotlin DSL لإنشاء الرسم البياني، تكون إضافة وجهة لمربع الحوار مشابهة جدًا عند استخدام Compose.

اطّلِع على كيفية استخدام المقتطف التالي لدالة dialog() أيضًا لإضافة وجهة مربّع حوار تستخدم جزءًا:

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

    // Define the "settings" destination as a dialog using DialogFragment.
    dialog<SettingsDialogFragment>("settings") {
        label = "Settings Dialog"
    }
}

XML

إذا كان لديك DialogFragment حالي، استخدِم العنصر <dialog> لإضافة مربّع الحوار إلى الرسم البياني للتنقّل، كما هو موضّح في المثال التالي:

<?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>