Sử dụng phần lồng ghép Material 3

Để dễ sử dụng, nhiều thành phần kết hợp Material 3 tích hợp sẵn (androidx.compose.material3) sẽ tự xử lý phần lồng ghép, dựa trên cách các thành phần kết hợp được đặt trong ứng dụng theo quy cách của Material.

Các thành phần kết hợp xử lý phần lồng ghép

Sau đây là danh sách Các thành phần Material tự động xử lý phần lồng ghép.

Thanh ứng dụng

• TopAppBar / SmallTopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: Áp dụng các cạnh trên cùng và ngang của thanh hệ thống làm khoảng đệm vì được dùng ở đầu cửa sổ.
• BottomAppBar: Áp dụng các cạnh dưới cùng và ngang của thanh hệ thống làm khoảng đệm.

Vùng chứa nội dung

• ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (nội dung bên trong ngăn điều hướng phương thức): Áp dụng phần lồng ghép theo chiều dọc và bắt đầu cho nội dung.
• ModalBottomSheet: Áp dụng phần lồng ghép dưới cùng.
• NavigationBar : Áp dụng phần lồng ghép dưới cùng và theo chiều ngang.
• NavigationRail: Áp dụng phần lồng ghép dọc và bắt đầu.

Scaffold

Theo mặc định, Scaffold cung cấp phần lồng ghép dưới dạng tham số PaddingValues để bạn sử dụng. Scaffold không áp dụng phần lồng ghép cho nội dung; bạn phải chịu trách nhiệm về việc này. Ví dụ: để sử dụng các phần lồng ghép này bằng LazyColumn bên trong 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

Video sau đây cho thấy một LazyColumn trong Scaffold khi màn hình tràn viền bị tắt và bật:

Việc sử dụng tham số PaddingValues trong Scaffold thường đủ để chèn giao diện người dùng ra khỏi giao diện người dùng hệ thống và vết cắt trên màn hình. Tránh sử dụng các phương pháp xử lý phần lồng ghép bổ sung như thước đo, đối tượng sửa đổi khoảng đệm hoặc đối tượng sửa đổi kích thước phần lồng ghép nếu bạn đang dùng Scaffold để tránh áp dụng quá nhiều khoảng đệm cho giao diện người dùng.

Ghi đè phần lồng ghép mặc định

Bạn có thể thay đổi tham số windowInsets được truyền đến thành phần kết hợp để định cấu hình hành vi của thành phần kết hợp. Tham số này có thể là một loại phần lồng ghép cửa sổ khác để áp dụng thay thế hoặc bị vô hiệu hoá bằng cách truyền một thực thể trống: WindowInsets(0, 0, 0, 0).

Ví dụ: để tắt tính năng xử lý phần lồng ghép trên LargeTopAppBar, hãy đặt tham số windowInsets thành một thực thể trống:

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