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

إذا كنت تريد تنفيذ لوحة سفلية، يمكنك استخدام العنصر القابل للتجميع 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، ويمكنك استدعاؤها استجابةً لأحداث UI. احرص على إزالة الرمز 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