Kısmi alt sayfa

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

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

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, 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, 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 kez bastığında sayfa kısmen gösterilir:

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

Ek kaynaklar

• Alt sayfalar