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

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