Bạn có thể hiện một phần bảng dưới cùng rồi cho phép người dùng hiện toàn màn hình hoặc đóng bảng này.
Để thực hiện việc này, hãy chuyển ModalBottomSheet
một bản sao 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 trang tính ở 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) ) } } } }
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ủaSheetState
trong đóskipPartiallyExpanded
là giá trị false.ModalBottomSheet
sẽ lấy một đối tượng sửa đổi đảm bảo việc này sẽ lấp đầy màn hình khi được mở rộng hoàn toàn.ModalBottomSheet
lấysheetState
làm giá trị cho tham sốsheetState
.- Do đó, trang tính chỉ hiển thị một phần khi được mở lần đầu. Sau đó, người dùng có thể kéo hoặc vuốt biểu tượng để 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ì 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á trang tính.
Kết quả
Khi người dùng nhấn nút này lần đầu, trang tính sẽ hiển thị một phần:
![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 hoặc đóng màn hình](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-partial.png?hl=vi)
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:
![Bảng dưới cùng mà người dùng đã mở rộng để lấp đầy màn hình.](https://developer.android.google.cn/static/develop/ui/compose/images/components/bottom-sheet-fullscreen.png?hl=vi)