إذا أردت تنفيذ بطاقة سفلية، يمكنك استخدام عنصر
ModalBottomSheet
القابل للإنشاء.
يمكنك استخدام الخانة content
التي تستخدم ColumnScope
لتنسيق العناصر القابلة للإنشاء لمحتوى الأوراق في عمود:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) { // Sheet content }
يتم توسيع جدول البيانات وتصغيره آليًا باستخدام
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") } } } }