Alt sayfalar

Materyal Tasarım 3'te modal alt sayfa örneği.

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

Sayfa içeriği composable'larını bir sütunda düzenlemek için 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şletmek ve daraltmak için SheetState kullanın. SheetState öğesinin ModalBottomSheet öğesine sheetState parametresiyle iletilmesi gereken bir örneğini oluşturmak için rememberSheetState öğesini 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 CoroutineScope gerektirir (ör. rememberCoroutineScope kullanma) ve bunları kullanıcı arayüzü etkinliklerine yanıt olarak çağırabilirsiniz. Alt sayfayı gizlediğinizde ModalBottomSheet öğesini 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

Jetpack Compose'da içerik gösteren bir modal alt sayfa.