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

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

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

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

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

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

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

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

Scaffold

بشكلٍ تلقائي، 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