استخدام عناصر مضمّنة بتصميم Material 3

لتسهيل الاستخدام، تعالج العديد من دوال Material 3 القابلة للإنشاء المضمّنة (androidx.compose.material3) عمليات الإدخال نفسها، استنادًا إلى طريقة وضع الدوال القابلة للإنشاء في تطبيقك وفقًا لمواصفات Material.

ملاحظة: لا تتعامل "مكوّنات Material 2" (androidx.compose.material) تلقائيًا مع الحواف الداخلية. ومع ذلك، يمكنك الوصول إلى الحواف وتطبيقها يدويًا. في androidx.compose.material 1.6.0 والإصدارات الأحدث، استخدِم المَعلمة windowInsets لتطبيق الحواف الداخلية يدويًا على BottomAppBar وTopAppBar وBottomNavigation وNavigationRail. وبالمثل، استخدِم المَعلمة contentWindowInsets لـ Scaffold. في ما عدا ذلك، طبِّق عمليات الإزاحة يدويًا كمسافة بادئة.

عناصر قابلة للإنشاء للتعامل مع المساحات الداخلية

في ما يلي قائمة بمكوّنات Material التي تعالج عمليات الإدراج تلقائيًا.

أشرطة التطبيقات

• ‫TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: يطبّق الجانبَين العلوي والأفقي من أشرطة النظام كمسافة بادئة لأنّه يتم استخدامه في أعلى النافذة.
• BottomAppBar: يطبِّق الجانبَين السفلي والأفقي لأشرطة النظام كمساحة متروكة.

حاويات المحتوى

• ‫ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (المحتوى داخل لائحة التنقل المنبثقة): يتم تطبيق مساحات داخلية عمودية وفي بداية على المحتوى.
• ‫ModalBottomSheet: تطبِّق هذه السمة عمليات الإدراج السفلية.
• NavigationBar : يطبِّق عمليات الإدراج السفلية والأفقية.
• NavigationRail: تطبِّق هذه السمة عمليات الإدراج العمودية والأولى.

سقالة

توفّر Scaffold بشكلٍ تلقائي هوامش داخلية كالمَعلمة PaddingValues لتتمكّن من استخدامها. لا يطبّق Scaffold عمليات الإزاحة على المحتوى، بل تقع هذه المسؤولية على عاتقك. على سبيل المثال، لاستهلاك هذه الحواف الداخلية باستخدام LazyColumn داخل Scaffold:

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        // ..
    }
}
InsetsSnippets.kt

يعرض الفيديو التالي LazyColumn داخل Scaffold مع إيقاف وتفعيل العرض من الحافة إلى الحافة:

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

تجاوز الإعدادات التلقائية للحدود الداخلية

يمكنك تغيير المَعلمة windowInsets التي تم تمريرها إلى الدالة المركّبة لتحديد سلوك الدالة المركّبة. يمكن أن تكون هذه المَعلمة نوعًا مختلفًا من مساحة النافذة الداخلية لتطبيقها بدلاً من ذلك، أو يمكن إيقافها من خلال تمرير مثيل فارغ: WindowInsets(0, 0, 0, 0).

على سبيل المثال، لإيقاف معالجة الحواف الداخلية في LargeTopAppBar، اضبط المَعلمة windowInsets على قيمة فارغة:

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)
InsetsSnippets.kt