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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Để 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) 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 thông số kỹ thuật của Material.

Thành phần kết hợp xử lý phần lồng ghép

Sau đây là danh sách 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ì nó được sử 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 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 và ngang.
• NavigationRail: Áp dụng các phần lồng ghép dọc và bắt đầu.

Scaffold

Theo mặc định, Scaffold cung cấp các 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 LazyColumn trong Scaffold với màn hình tràn viền được bật và tắt:

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 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