Alt sayfalar

Material Design 3 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şletip daraltmak için SheetState kullanın. rememberModalBottomSheetState kullanarak SheetState örneği oluşturabilirsiniz. Bu örnek, sheetState parametresiyle ModalBottomSheet'ye iletilmelidir. SheetState, show ve hide işlevlerinin yanı sıra mevcut 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.