Bottom Sheet บางส่วน

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

หากต้องการทำเช่นนั้น ให้ส่งอินสแตนซ์ SheetState ที่มี 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)
                )
            }
        }
    }
}

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

ในตัวอย่างนี้ โปรดทราบสิ่งต่อไปนี้

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

ผลลัพธ์

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

Bottom Sheet ที่ตอนแรกจะเติมเฉพาะบางส่วนของหน้าจอ ผู้ใช้สามารถปัดเพื่อแสดงวิดีโอเต็มหน้าจอหรือปิดวิดีโอ
รูปที่ 1 Bottom Sheet ที่แสดงบางส่วน

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

Bottom Sheet ที่ผู้ใช้ขยายให้เต็มหน้าจอ
รูปที่ 2 Bottom Sheet แบบเต็มหน้าจอ

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