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

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

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

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

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

• ‫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