Một phần bảng dưới cùng

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.

Bạn có thể hiển thị một phần tờ thông tin dưới cùng, sau đó cho phép người dùng mở rộng hoặc đóng tờ thông tin đó.

Để thực hiện việc này, hãy truyền ModalBottomSheet một thực thể của SheetState với skipPartiallyExpanded được đặt thành false.

Ví dụ

Ví dụ này minh hoạ cách bạn có thể sử dụng thuộc tính sheetState của ModalBottomSheet để hiển thị trang tính chỉ một phần ở bước đầu tiên:

@Composable
fun PartialBottomSheet() {
    var showBottomSheet by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false,
    )

    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(
            onClick = { showBottomSheet = true }
        ) {
            Text("Display partial bottom sheet")
        }

        if (showBottomSheet) {
            ModalBottomSheet(
                modifier = Modifier.fillMaxHeight(),
                sheetState = sheetState,
                onDismissRequest = { showBottomSheet = false }
            ) {
                Text(
                    "Swipe up to open sheet. Swipe down to dismiss.",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}
BottomSheet.kt

Các điểm chính về mã

Trong ví dụ này, hãy lưu ý những điều sau:

• showBottomSheet kiểm soát xem ứng dụng có hiển thị trang tính dưới cùng hay không.
• sheetState là một thực thể của SheetState trong đó skipPartiallyExpanded là sai.
• ModalBottomSheet sử dụng một đối tượng sửa đổi đảm bảo lấp đầy màn hình khi được mở rộng hoàn toàn.
• ModalBottomSheet lấy sheetState làm giá trị cho tham số sheetState.
  • Do đó, bảng chỉ hiển thị một phần khi mở lần đầu. Chiến lược phát hành đĩa đơn sau đó, người dùng có thể kéo hoặc vuốt quảng cáo để chuyển sang chế độ toàn màn hình hoặc bỏ qua.
• Hàm lambda onDismissRequest kiểm soát những gì sẽ xảy ra khi người dùng cố gắng đóng bảng dưới cùng. Trong trường hợp này, hàm này chỉ xoá trang tính.

Kết quả

Khi người dùng nhấn nút này lần đầu tiên, trang tính sẽ hiển thị một phần:

Nếu người dùng vuốt lên trên trang tính, thao tác này sẽ lấp đầy màn hình:

Tài nguyên khác

• Bảng dưới cùng