Bottom Sheet บางส่วน

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

โดยส่งอินสแตนซ์ SheetState ให้กับ ModalBottomSheet โดยตั้งค่า skipPartiallyExpanded เป็น false

หมายเหตุ: ModalBottomSheet เป็นเวอร์ชันทดลอง โปรดส่งปัญหาในเครื่องมือติดตามปัญหา

ตัวอย่าง

ตัวอย่างนี้แสดงถึงวิธีการใช้พร็อพเพอร์ตี้ 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 ควบคุมว่าจะให้แอปแสดงชีตด้านล่างหรือไม่
• sheetState เป็นอินสแตนซ์ของ SheetState โดยที่ skipPartiallyExpanded เป็นเท็จ
• ModalBottomSheet ใช้ตัวแก้ไขเพื่อให้แสดงเต็มหน้าจอเมื่อขยายอย่างเต็มที่
• ModalBottomSheet ใช้ sheetState เป็นค่าสําหรับพารามิเตอร์ sheetState
  • ด้วยเหตุนี้ชีตจึงแสดงเพียงบางส่วนเมื่อเปิดเป็นครั้งแรก จากนั้นผู้ใช้สามารถลากหรือปัดนิ้วเพื่อแสดงเนื้อหาเต็มหน้าจอหรือปิดได้
• onDismissRequest lambda จะควบคุมสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้พยายามปิดชีตด้านล่าง ในกรณีนี้ ระบบจะนำเฉพาะชีตออก

ผลลัพธ์

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

ภาพที่ 1 Bottom Sheet ที่แสดงผลบางส่วน

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

รูปที่ 2 ชีตด้านล่างแบบเต็มหน้าจอ

หมายเหตุ: หากตั้งค่า skipPartiallyExpanded เป็น "จริง" ชีตจะเปิดขึ้นทันทีแบบเต็มหน้าจอ

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

• ชีตด้านล่าง