Kısmi alt sayfa

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

Bunun için ModalBottomSheet öğenize skipPartiallyExpanded parametresi false olarak ayarlanmış bir SheetState örneği iletin.

Örnek

Bu örnekte, sayfayı ilk başta yalnızca kısmen görüntülemek için ModalBottomSheet özelliğinin 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 aşağıdakilere 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.
  • Sonuç olarak, e-tablo ilk açıldığında yalnızca kısmen gösterilir. Kullanıcı, tam ekran yapmak veya kapatmak için bu paneli sürükleyebilir ya da kaydırabilir.
• 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 kez bastığında sayfa kısmen gösterilir:

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

Ek kaynaklar

• Alt sayfalar