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

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

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

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

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

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

لتوسيع ورقة البيانات وتصغيرها آليًا، استخدِم SheetState. يمكنك استخدام rememberSheetState لإنشاء مثيل من 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 تعرض المحتوى