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

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

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

في ما يلي قائمة بمكوّنات Materialالتي تتعامل تلقائيًا مع الحواف الداخلية.

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

• ‫TopAppBar / SmallTopAppBar / 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