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

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