Alt sayfalar

Alt sayfa uygulamak istiyorsanız ModalBottomSheet composable'ı kullanabilirsiniz.

Sayfa içeriğini composable'lar sütuna yerleştirmek için ColumnScope kullanan content alanını kullanabilirsiniz:

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

Sayfayı programatik olarak genişletme ve daraltma işlemi, SheetState kullanılarak yapılır. sheetState parametresiyle ModalBottomSheet öğesine iletilmesi gereken bir SheetState örneği oluşturmak için rememberSheetState kullanabilirsiniz. SheetState, show ve hide işlevlerinin yanı sıra geçerli e-tablo durumuyla ilgili özelliklere erişim sağlar. Bu askıya alma işlevleri, bir CoroutineScope gerektirir (örneğin, rememberCoroutineScope kullanarak) ve kullanıcı arayüzü etkinliklerine yanıt olarak çağrılabilir. Alt sayfayı gizledikten sonra bileşimden ModalBottomSheet öğesini 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