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

E-tablonun programatik olarak genişletilmesi ve daraltılması SheetState kullanılarak yapılır. sheetState parametresi ile ModalBottomSheet'e iletilmesi gereken bir SheetState örneği oluşturmak için rememberSheetState'i 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) ve kullanıcı arayüzü etkinliklerine yanıt olarak çağrılabilir. 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