Kısmi alt sayfa

Alt sayfayı kısmen gösterebilir ve ardından kullanıcının tam ekran yapmasına veya kapatmasına izin verebilirsiniz.

Bunun için ModalBottomSheet'nize skipPartiallyExpanded, false olarak ayarlanmış bir SheetState örneği iletin.

Örnek

Bu örnekte, sayfanın başlangıçta yalnızca kısmen gösterilmesi için ModalBottomSheet öğesinin sheetState özelliğini nasıl kullanabileceğiniz gösterilmektedir:

@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

Kodla ilgili önemli noktalar

Bu örnekte şunlara dikkat edin:

• showBottomSheet, uygulamanın alt sayfayı gösterip göstermeyeceğini kontrol eder.
• sheetState, skipPartiallyExpanded değerinin yanlış olduğu bir SheetState örneğidir.
• ModalBottomSheet, tamamen genişletildiğinde ekranı doldurmasını sağlayan bir değiştirici alır.
• ModalBottomSheet, sheetState parametresinin değeri olarak sheetState değerini alır.
  • Bu nedenle, sayfa ilk açıldığında yalnızca kısmen gösterilir. Kullanıcı daha sonra bunu sürükleyerek veya kaydırarak tam ekran yapabilir ya da kapatabilir.
• onDismissRequest lambda, kullanıcı alt sayfayı kapatmaya çalıştığında ne olacağını kontrol eder. Bu durumda yalnızca sayfa kaldırılır.

Sonuçlar

Kullanıcı düğmeye ilk bastığında sayfa kısmen gösterilir:

Kullanıcı sayfayı yukarı kaydırırsa sayfa ekranı kaplar:

Ek kaynaklar

• Alt sayfalar