Kısmi alt sayfa

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

Bunu yapmak için ModalBottomSheet öğenizi, skipPartiallyExpanded değeri false olarak ayarlanmış bir SheetState örneğiyle iletin.

Örnek

Bu örnekte, ModalBottomSheet öğesinin sheetState özelliğini kullanarak sayfanın ilk başta yalnızca kısmen nasıl görüntüleneceği 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, SheetState öğesinin bir örneğidir. Burada skipPartiallyExpanded değeri false'tur.
  • ModalBottomSheet, tam olarak 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, ilk açıldığında sayfa yalnızca kısmen görüntülenir. Kullanıcı daha sonra tam ekran yapmak veya kapatmak için bu bildirimi sürükleyebilir ya da kaydırabilir.
  • onDismissRequest lambda, kullanıcının 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örüntülenir:

Başlangıçta ekranın yalnızca bir bölümünü dolduran alt sayfa. Kullanıcı, ekranı doldurmak için kaydırabilir veya kapatabilir.
1. şekil. Kısmen görüntülenen alt sayfa.

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

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

Ek kaynaklar