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

Bạn có thể hiển thị một phần bảng dưới cùng, sau đó cho phép người dùng mở rộng bảng đó ra toàn màn hình hoặc đóng bảng đó.

Để làm như vậy, hãy truyền cho 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 để chỉ hiển thị một phần bảng lúc đầu:

@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)
                )
            }
        }
    }
}

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 việc ứng dụng có hiển thị bảng dưới cùng hay không.
  • sheetState là một thực thể của SheetState trong đó skipPartiallyExpanded là false.
  • ModalBottomSheet lấy một đối tượng sửa đổi để đảm bảo rằng đối tượng này sẽ 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 đó, trang tính chỉ hiển thị một phần khi mở lần đầu. Sau đó, người dùng có thể kéo hoặc vuốt bảng để mở rộng ra toàn màn hình hoặc đóng bảng đó.
  • Lambda onDismissRequest kiểm soát những gì 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, thao tác này chỉ xoá bảng.

Kết quả

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

Một bảng dưới cùng ban đầu chỉ lấp đầy một phần màn hình. Người dùng có thể vuốt để lấp đầy màn hình bằng thông báo này hoặc đóng thông báo
Hình 1. Bảng dưới cùng hiển thị một phần.

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

Một bảng dưới cùng mà người dùng đã mở rộng để lấp đầy màn hình.
Hình 2. Bảng dưới cùng ở chế độ toàn màn hình.

Tài nguyên khác