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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

لتسهيل الاستخدام، تتعامل العديد من العناصر القابلة للتجميع المضمّنة في Material 3 (androidx.compose.material3) مع الأجزاء المضمّنة بنفسها، استنادًا إلى كيفية وضع العناصر القابلة للتجميع في تطبيقك وفقًا لمواصفات 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 مع ميزة العرض من الحافة إلى الحافة مفعَّلة وغير مفعَّلة:

إلغاء الأجزاء المضمّنة التلقائية

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

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

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