البطاقات السفلية

مثال على ورقة في أسفل الشاشة بتصميم مشروط من Material Design 3

إذا أردت تنفيذ ورقة في أسفل الشاشة، يمكنك استخدام العنصر المركّب ModalBottomSheet.

يمكنك استخدام فتحة content التي تستخدم ColumnScope لتحديد تخطيط العناصر القابلة للإنشاء في ورقة المحتوى في عمود:

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

التحكّم في حالة ورقة التحكّم آليًا

لتوسيع ورقة البيانات وتصغيرها آليًا، استخدِم SheetState. يمكنك استخدام rememberModalBottomSheetState لإنشاء مثيل من SheetState يجب تمريره إلى ModalBottomSheet باستخدام المَعلمة sheetState. توفّر السمة SheetState إمكانية الوصول إلى وظائف show وhide، بالإضافة إلى السمات ذات الصلة بحالة الورقة الحالية. تتطلّب دوال التعليق هذه CoroutineScope، مثل استخدام rememberCoroutineScope، ويمكنك استدعاؤها استجابةً لأحداث واجهة المستخدم. احرص على إزالة ModalBottomSheet من التركيبة عند إخفاء البطاقة السفلية.

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 تعرض المحتوى