Bảng dưới cùng

Nếu muốn triển khai một 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 để bố cục các thành phần kết hợp của nội dung trang tính trong một cột:

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

Việc mở rộng và thu gọn trang tính theo phương thức lập trình được thực hiện bằng cách sử dụng SheetState. Bạn có thể sử dụng rememberSheetState để tạo một thực thể của SheetState. Bản sao này sẽ được chuyển đến 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 trang tính hiện tại. Các hàm tạm ngưng này đòi hỏi phải có CoroutineScope — ví dụ: sử dụng rememberCoroutineScope — và có thể được gọi để 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 kết hợp 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