Bảng dưới cùng

Ví dụ về bảng dưới cùng dạng thay thế Material Design 3.

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ể 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 phương thức lập trình, hãy dùng SheetState. Bạn có thể dùng rememberSheetState để tạo một phiên bản 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. 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

Một bảng dưới cùng phương thức trong Jetpack Compose hiển thị nội dung.