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

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

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

مربّع حوار قابل للإنشاء

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

ضع في الاعتبار المثال التالي:

@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. تستخدم وجهة البدء مسار Home. لأنّ يضيف composable() ذلك إلى الرسم البياني، فهو وجهة مستضافة.
  2. أمّا الوجهة الأخرى، فتتّبع مسار Settings.
    • وبالمثل، نظرًا لأن dialog() يضيفه إلى الرسم البياني، فإنه يمثل مربع حوار الوجهة.
    • عندما ينتقل المستخدم من HomeScreen إلى SettingsScreen الأخير يظهر على HomeScreen.
  3. مع أنّ السمة SettingsScreen لا تتضمّن عنصر Dialog قابل للإنشاء، ولأنها وجهة مربع حوار، فإن NavHost تعرضها داخل Dialog

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

لغة Kotlin DSL

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

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

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

إذا كان لديك عنصر 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>