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

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