استخدام عناصر مضمّنة بتصميم 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