Kısmi alt sayfa

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

Bunu yapmak için skipPartiallyExpanded false değerine ayarlanmış bir ModalBottomSheet SheetState örneğini iletin.

Örnek

Bu örnekte, sayfayı başlangıçta yalnızca kısmen görüntülemek 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 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 değeri false'tur.
  • ModalBottomSheet, tamamen genişletildiğinde ekranı doldurmasını sağlayan bir değiştirici alır.
  • ModalBottomSheet, sheetState parametresi için sheetState değerini alır.
    • Sonuç olarak, sayfa ilk açıldığında yalnızca kısmen görüntülenir. Kullanıcı daha sonra uygulamayı tam ekran yapmak için sürükleyebilir veya kaydırabilir ya da kapatabilir.
  • onDismissRequest lambdası, 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 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.

Ek kaynaklar