Alt sayfalar

Alt sayfa uygulamak isterseniz ModalBottomSheet composable'ı kullanabilirsiniz.

Bir sütunda sayfa içeriği composable'larını düzenlemek için ColumnScope kullanan content alanı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 kullanabilirsiniz. SheetState, show ve hide işlevlerine ve mevcut sayfa durumuyla ilgili özelliklere erişim sağlar. Bu askıya alma işlevleri için 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