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

إذا أردت تنفيذ ورقة في أسفل الشاشة، يمكنك استخدام العنصر المركّب 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