استخدام عناصر مضمّنة بتصميم 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 مع إيقاف وتفعيل ميزة العرض من الحافة إلى الحافة:

تجاوز الإعدادات التلقائية للحدود الداخلية

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

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

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