Bảng dưới cùng

Nếu muốn triển khai bảng dưới cùng, bạn có thể sử dụng thành phần kết hợp ModalBottomSheet.

Bạn có thể sử dụng khe content. Khe này sử dụng ColumnScope để sắp xếp bố cục thành phần kết hợp nội dung của bảng trong một cột:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}
MaterialLayoutSnippets.kt

Kiểm soát trạng thái trang tính theo phương thức lập trình

Để mở rộng và thu gọn bảng tính theo lập trình, hãy sử dụng SheetState. Bạn có thể sử dụng rememberSheetState để tạo một thực thể của SheetState. Phiên bản này sẽ được chuyển tới ModalBottomSheet bằng tham số sheetState. SheetState cung cấp quyền truy cập vào các hàm show và hide, cũng như các thuộc tính liên quan đến trạng thái hiện tại của bảng tính. Các hàm tạm ngưng này yêu cầu CoroutineScope — ví dụ: sử dụng rememberCoroutineScope — và bạn có thể gọi các hàm này để phản hồi các sự kiện giao diện người dùng. Hãy nhớ xoá ModalBottomSheet khỏi thành phần khi ẩn bảng dưới cùng.

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // Screen content

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState
        ) {
            // Sheet content
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}
MaterialLayoutSnippets.kt