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