Alt sayfalar

Alt sayfa uygulamak istiyorsanız ModalBottomSheet bileşenini kullanabilirsiniz.

Sayfa içeriği bileşenlerini bir sütunda düzenleyen ColumnScope kullanan content yuvasını kullanabilirsiniz:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}
MaterialLayoutSnippets.kt

Sayfa durumunu programatik olarak kontrol etme

Sayfayı programatik olarak genişletip daraltmak için SheetState simgesini kullanın. sheetState parametresi ile ModalBottomSheet'e iletilmesi gereken bir SheetState örneği oluşturmak için rememberSheetState kullanabilirsiniz. SheetState, show ve hide işlevlerinin yanı sıra geçerli sayfa durumuyla ilgili özelliklere erişim sağlar. Bu askıya alma işlevleri için bir CoroutineScope gerekir (ör. rememberCoroutineScope kullanılarak). Bu işlevleri kullanıcı arayüzü etkinliklerine yanıt olarak çağırabilirsiniz. Alt sayfayı gizledikten sonra ModalBottomSheet'yi kompozisyondan kaldırdığınızdan emin olun.

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // Screen content

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState
        ) {
            // Sheet content
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}
MaterialLayoutSnippets.kt