Bottom Sheet บางส่วน

คุณอาจแสดง Bottom Sheet เพียงบางส่วนเท่านั้น แล้วให้ผู้ใช้สร้าง เต็มหน้าจอหรือปิด

ซึ่งทำได้โดยส่ง ModalBottomSheet อินสแตนซ์ SheetState โดยตั้งค่า skipPartiallyExpanded เป็น false

ตัวอย่าง

ตัวอย่างนี้แสดงถึงวิธีใช้พร็อพเพอร์ตี้ sheetState ของ ModalBottomSheet เพื่อแสดงชีตเพียงบางส่วนในตอนแรก:

@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)
                )
            }
        }
    }
}
BottomSheet.kt

ประเด็นสำคัญเกี่ยวกับโค้ด

ในตัวอย่างนี้ โปรดทราบข้อมูลต่อไปนี้

• showBottomSheet จะควบคุมให้แอปแสดง Bottom Sheet
• sheetState เป็นอินสแตนซ์ของ SheetState โดยที่ skipPartiallyExpanded เป็นเท็จ
• ModalBottomSheet ใช้ตัวแก้ไขเพื่อให้แสดงเต็มหน้าจอ เมื่อขยายทั้งหมด
• ModalBottomSheet ใช้ค่า sheetState เป็นค่าสำหรับ sheetState พารามิเตอร์
  • ดังนั้นชีตจะแสดงเพียงบางส่วนเมื่อเปิดครั้งแรก ผู้ใช้สามารถลากหรือปัดนิ้วเพื่อแสดงรูปภาพเต็มหน้าจอหรือปิดได้
• lambda onDismissRequest จะควบคุมสิ่งที่เกิดขึ้นเมื่อผู้ใช้พยายาม ปิด Bottom Sheet ในกรณีนี้ ระบบจะนำเฉพาะชีตออก

ผลลัพธ์

เมื่อผู้ใช้กดปุ่มเป็นครั้งแรก ชีตจะแสดงข้อมูลต่อไปนี้บางส่วน

วันที่

หากผู้ใช้ปัดขึ้นในชีต ชีตนั้นจะแสดงเต็มหน้าจอ

วันที่

แหล่งข้อมูลเพิ่มเติม

• Bottom Sheet