تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
في نظام التنقّل على Android، يشير المصطلح وجهة مربّع الحوار إلى الوجهات.
داخل الرسم البياني للتنقل في التطبيق والذي على شكل نوافذ لمربعات الحوار،
تركيب عناصر واجهة المستخدم للتطبيق والمحتوى.
ولأن وجهات مربّعات الحوار تظهر عبر الوجهات المستضافة التي تملأ
مضيف التنقل، هناك بعض الاعتبارات المهمة المتعلقة بكيفية إدارة مربع الحوار
من الوجهات التفاعلية مع الحزمة الخلفية لـ NavController.
مربّع حوار قابل للإنشاء
لإنشاء وجهة مربّع حوار في ميزة "إنشاء"، أضِف وجهة إلى NavHost.
باستخدام الدالة dialog(). تعمل الدالة بشكل أساسي تمامًا
composable، سيؤدي هذا الإجراء فقط إلى إنشاء وجهة مربّع حوار بدلاً من مضيف
الوجهة.
ضع في الاعتبار المثال التالي:
@SerializableobjectHome@SerializableobjectSettings@ComposablefunHomeScreen(onNavigateToSettings:()->Unit){Column{Text("Home")Button(onClick=onNavigateToSettings){Text("Open settings")}}}// This screen will be displayed as a dialog@ComposablefunSettingsScreen(){Text("Settings")// ...}@ComposablefunMyApp(){valnavController=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
إنشاء الرسم البياني، فإن إضافة وجهة مربع حوار تشبه إلى حدٍ كبيرٍ عند استخدام
إنشاء.
ننصحك بالاطّلاع على الطريقة التي يستخدم بها المقتطف التالي الدالة dialog() أيضًا لتنفيذ ما يلي:
إضافة وجهة مربّع حوار تستخدم جزءًا:
// Define destinations with serializable classes or objects@SerializableobjectHome@SerializableobjectSettings// 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> للأغراض التالية:
وأضف مربع الحوار إلى الرسم البياني للتنقل، كما هو موضح في المثال التالي:
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Dialog destinations\n\nIn Android navigation, the term *dialog destination* refers to destinations\nwithin the app's navigation graph which take the form of dialog windows,\noverlaying app UI elements and content.\n\nBecause dialog destinations appear over [hosted destinations](/guide/navigation/design) that fill the\nnavigation host, there are some important considerations regarding how dialog\ndestinations interact with your [`NavController`'s back stack](/guide/navigation/backstack/dialog).\n| **Note:** Dialog destinations implement the [`FloatingWindow`](/reference/androidx/navigation/FloatingWindow) interface. Your app treats any destination that implements this interface as a dialog destination.\n\nDialog composable\n-----------------\n\nTo create a dialog destination in Compose, add a destination to your `NavHost`\nusing the [`dialog()`](/reference/kotlin/androidx/navigation/NavGraphBuilder#(androidx.navigation.NavGraphBuilder).dialog(kotlin.collections.Map,kotlin.Function1)) function. The function behaves essentially the same as\n[`composable`](/reference/kotlin/androidx/navigation/NavGraphBuilder#(androidx.navigation.NavGraphBuilder).composable(kotlin.collections.Map,kotlin.collections.List,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function2))(), only it creates a dialog destination rather than a [hosted\ndestination](/guide/navigation/design).\n\nConsider the following example: \n\n @Serializable\n object Home\n @Serializable\n object Settings\n @Composable\n fun HomeScreen(onNavigateToSettings: () -\u003e Unit){\n Column {\n Text(\"Home\")\n Button(onClick = onNavigateToSettings){\n Text(\"Open settings\")\n }\n }\n }\n\n // This screen will be displayed as a dialog\n @Composable\n fun SettingsScreen(){\n Text(\"Settings\")\n // ...\n }\n\n @Composable\n fun MyApp() {\n val navController = rememberNavController()\n NavHost(navController, startDestination = Home) {\n composable\u003cHome\u003e { HomeScreen(onNavigateToSettings = { navController.navigate(route = Settings) }) }\n dialog\u003cSettings\u003e { SettingsScreen() }\n }\n }\n\n1. The start destination uses the `Home` route. Because `composable()` adds it to the graph, it is a hosted destination.\n2. The other destination uses the `Settings` route.\n - Similarly, because `dialog()` adds it to the graph, it is a dialog destination.\n - When the user navigates from `HomeScreen` to `SettingsScreen` the latter appears over `HomeScreen`.\n3. Although `SettingsScreen` doesn't include a `Dialog` composable itself, because it is a dialog destination, the `NavHost` displays it within a `Dialog`.\n\nDialog destinations appear over the previous destination in the `NavHost`. Use\nthem when the dialog represents a separate screen in your app that needs its own\nlifecycle and saved state, independent of any other destination in your\nnavigation graph. You might prefer to use an [`AlertDialog`](/jetpack/compose/components/dialog) or related\ncomposable if you want a dialog for a less complex prompt, such as a\nconfirmation.\n| **Note:** Because bottom sheets in Compose are not built on `Dialog`, they need their own destination type. See the [Accompanist Navigation Material\n| documentation](https://google.github.io/accompanist/navigation-material/) for an example implementation.\n\nKotlin DSL\n----------\n\nIf you are working with fragments and you are using the [Kotlin DSL](/guide/navigation/design/kotlin-dsl) to\ncreate your graph, adding a dialog destination is very similar to when using\nCompose.\n\nConsider how in the following snippet also uses the [`dialog()`](/reference/kotlin/androidx/navigation/NavGraphBuilder#(androidx.navigation.NavGraphBuilder).dialog(kotlin.Int)) function to\nadd a dialog destination that uses a fragment: \n\n // Define destinations with serializable classes or objects\n @Serializable\n object Home\n @Serializable\n object Settings\n\n // Add the graph to the NavController with `createGraph()`.\n navController.graph = navController.createGraph(\n startDestination = Home\n ) {\n // Associate the home route with the HomeFragment.\n fragment\u003cHomeFragment, Home\u003e {\n label = \"Home\"\n }\n\n // Define the settings destination as a dialog using DialogFragment.\n dialog\u003cSettingsFragment, Settings\u003e {\n label = \"Settings\"\n }\n }\n\nXML\n---\n\nIf you have an existing [`DialogFragment`](/reference/androidx/fragment/app/DialogFragment), use the `\u003cdialog\u003e` element to\nadd the dialog to your navigation graph, as shown in the following example: \n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cnavigation xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n android:id=\"@+id/nav_graph\"\u003e\n\n...\n\n\u003cdialog\n android:id=\"@+id/my_dialog_fragment\"\n android:name=\"androidx.navigation.myapp.MyDialogFragment\"\u003e\n \u003cargument android:name=\"myarg\" android:defaultValue=\"@null\" /\u003e\n \u003caction\n android:id=\"@+id/myaction\"\n app:destination=\"@+id/another_destination\"/\u003e\n\u003c/dialog\u003e\n\n...\n\n\u003c/navigation\u003e\n```"]]