في التنقّل على Android، يشير مصطلح وجهة مربّع الحوار إلى الوجهات المتضمّنة في الرسم البياني للتنقّل في التطبيق والتي تأخذ شكل نوافذ مربّعات الحوار، وتداخل عناصر واجهة المستخدِم والمحتوى.
بما أنّ وجهات مربّعات الحوار تظهر على الوجهات المستضافة التي تملأ مضيف التنقّل، هناك بعض الاعتبارات المهمة بشأن كيفية تفاعل وجهات
مربعات الحوار مع حزمة الواجهة الخلفية لـ "NavController
".
مربّع حوار قابل للإنشاء
لإنشاء وجهة لمربّعات حوار في Compose، أضِف وجهة إلى 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() }
}
}
- تستخدم وجهة البداية المسار
Home
. بما أنّcomposable()
يضيفه إلى الرسم البياني، فهو وجهة مستضافة. - تستخدم الوجهة الأخرى المسار
Settings
.- وبالمثل، فإنّ
dialog()
تُضيفها إلى الرسم البياني، فهي وجهة لمربّع الحوار. - عندما ينتقل المستخدم من
HomeScreen
إلىSettingsScreen
، يظهر الاسم الأخير من خلالHomeScreen
.
- وبالمثل، فإنّ
- مع أنّ
SettingsScreen
لا يتضمّن عنصرDialog
قابل للإنشاء، لأنه وجهة مربّع حوار، تعرضه السمةNavHost
ضمنDialog
.
تظهر وجهات مربّع الحوار فوق الوجهة السابقة في NavHost
. استخدمها عندما يمثل مربع الحوار شاشة منفصلة في تطبيقك تحتاج إلى دورة حياتها وحالتها المحفوظة، بشكل مستقل عن أي وجهة أخرى في الرسم البياني للتنقل. قد تفضّل استخدام AlertDialog
أو عنصر قابل للإنشاء
ذات الصلة إذا كنت تريد مربع حوار لطلب أقل تعقيدًا، مثل
تأكيد.
خدمة Kotlin DSL
إذا كنت تتعامل مع الأجزاء وكنت تستخدم خدمة Kotlin DSL لإنشاء الرسم البياني، فإنّ إضافة وجهة لمربّعات الحوار تشبه إلى حدّ كبير ما يحدث عند استخدام أداة Compose.
اطّلِع على كيفية استخدام المقتطف التالي أيضًا لدالة 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>