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 đặt các thành phần kết hợp 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

Vùng chứa nội dung

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 với 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
    ) {
        // ..
    }
}

Video sau đây cho thấy LazyColumn trong Scaffold khi bật và tắt chế độ hiển thị tràn viền:

Thông thường, bạn chỉ cần sử dụng tham số PaddingValues trong Scaffold để lồng 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 kẻ, đố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 sử 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 composable để định cấu hình hành vi của composable. 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ị tắt 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")
    }
)

Trước
Sử dụng ảnh động IME trên bàn phím
Tiếp
Sử dụng phần lồng ghép trong Khung hiển thị và Compose