استفاده از حاشیه‌های «ماتریال ۳»

برای سهولت استفاده، بسیاری از عناصر ترکیبی داخلی Material 3 (androidx.compose.material3) خودشان حاشیه‌ها را براساس نحوه قرارگیری عناصر ترکیبی در برنامه شما طبق مشخصات Material مدیریت می‌کنند.

عناصر ترکیبی مدیریت حاشیه

در زیر فهرستی از عناصر مطالب آمده است که به‌طور خودکار از حاشیه‌ها استفاده می‌کنند.

نوار برنامه

  • TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: ازآنجایی‌که در بالای پنجره استفاده می‌شود، طرف‌های بالا و افقی نوارهای سیستم را به‌عنوان بالشتک اعمال می‌کند.
  • BottomAppBar: طرف‌های پایین و افقی نوارهای سیستم را به‌عنوان بالشتک اعمال می‌کند.

ظرف‌های محتوا

داربست

به‌طور پیش‌فرض، 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
    ) {
        // ..
    }
}

ویدیو زیر LazyColumn را در Scaffold با نمایشگر لبه‌به‌لبه غیرفعال و فعال نشان می‌دهد:

استفاده از پارامتر PaddingValues در Scaffold معمولاً برای قرار دادن میانای کاربر شما دور از میانای کاربر سیستم و برش‌های نمایشگر کافی است. اگر از Scaffold استفاده می‌کنید، از رویکردهای مدیریت درج اضافی مثل خط‌کش‌ها، اصلاح‌کننده‌های حاشیه، یا اصلاح‌کننده‌های اندازه درج استفاده نکنید تا حاشیه زیادی به میانای کاربری‌تان اعمال نشود.

ملغی کردن حاشیه‌های پیش‌فرض

می‌توانید پارامتر windowInsets ارسال‌شده به عنصر ترکیبی را تغییر دهید تا عملکرد عنصر ترکیبی را پیکربندی کنید. این پارامتر می‌تواند نوع دیگری از درون‌بر پنجره باشد که به‌جای آن اعمال شود، یا با ارسال نمونه خالی: WindowInsets(0, 0, 0, 0) غیرفعال شود.

برای مثال، برای غیرفعال کردن مدیریت حاشیه در LargeTopAppBar، پارامتر windowInsets را روی نمونه خالی تنظیم کنید:

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