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

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