Kısmi alt sayfa

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

Bunu yapmak için ModalBottomSheet cihazınızda SheetState örneği iletin skipPartiallyExpanded false olarak ayarlandı.

Örnek

Bu örnekte, sheetState Sayfayı başlangıçta yalnızca kısmen görüntülemek için 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

Kodla ilgili önemli noktalar

Bu örnekte aşağıdakilere dikkat edin:

  • showBottomSheet, uygulamanın alt sayfayı görüntüleyip görüntülemeyeceğini kontrol eder.
  • sheetState, SheetState öğesinin bir örneğidir; skipPartiallyExpanded yanlış.
  • ModalBottomSheet, ekranı doldurmasını sağlayan bir değiştirici alır tamamen genişletildiğinde.
  • ModalBottomSheet, sheetState değerini sheetState olarak alıyor parametresinden sonra bir değer girin.
    • Sonuç olarak, sayfa ilk açıldığında yalnızca kısmen görüntülenir. İlgili içeriği oluşturmak için kullanılan kullanıcı daha sonra videoyu tam ekran yapmak veya kapatmak için sürükleyebilir ya da kaydırabilir.
  • onDismissRequest lambdası, kullanıcı şunları yapmaya çalıştığında ne olacağını kontrol eder: alt sayfayı kapatın. Bu durumda yalnızca sayfa kaldırılır.

Sonuçlar

Kullanıcı düğmeye ilk bastığında sayfada kısmen görüntülenir:

Başlangıçta ekranın yalnızca bir kısmını kaplayan alt sayfa. Kullanıcı, ekranı bununla doldurmak için kaydırabilir veya kapatabilir
Şekil 1. Kısmen gösterilen alt sayfa.

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

Kullanıcının ekranı dolduracak şekilde genişlettiği alt sayfa.
Şekil 2. Tam ekran alt sayfa.
ziyaret edin.

Ek kaynaklar