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

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

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

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

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

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

لتوسيع الورقة وتصغيرها آليًا، استخدِم 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")
            }
        }
    }
}

نافذة ورقة في أسفل الشاشة في Jetpack Compose تعرض المحتوى