يمكنك عرض بطاقة سفلية جزئيًا ثم السماح للمستخدم إما بعرضها في وضع ملء الشاشة أو إغلاقها.
لإجراء ذلك، مرِّر إلى ModalBottomSheet مثيلاً من SheetState مع ضبط skipPartiallyExpanded على false.
مثال
يوضّح هذا المثال كيفية استخدام السمة sheetState في ModalBottomSheet لعرض جزء من ورقة البيانات في البداية:
@Composable fun PartialBottomSheet() { var showBottomSheet by remember { mutableStateOf(false) } val sheetState = rememberModalBottomSheetState( skipPartiallyExpanded = false, ) Column( modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally, ) { Button( onClick = { showBottomSheet = true } ) { Text("Display partial bottom sheet") } if (showBottomSheet) { ModalBottomSheet( modifier = Modifier.fillMaxHeight(), sheetState = sheetState, onDismissRequest = { showBottomSheet = false } ) { Text( "Swipe up to open sheet. Swipe down to dismiss.", modifier = Modifier.padding(16.dp) ) } } } }
نقاط رئيسية حول الرمز
في هذا المثال، يُرجى ملاحظة ما يلي:
- يتحكّم
showBottomSheetفي ما إذا كان التطبيق يعرض البطاقة السفلية. -
sheetStateهي مثيل لـSheetStateحيثskipPartiallyExpandedغير صحيح. - يأخذ
ModalBottomSheetمُعدِّلاً يضمن ملء الشاشة عند توسيعه بالكامل. - تستخدم الدالة
ModalBottomSheetالقيمةsheetStateلمَعلمةsheetState.- نتيجةً لذلك، لا يتم عرض الورقة إلا جزئيًا عند فتحها لأول مرة. ويمكن للمستخدم بعد ذلك سحب الإشعار أو التمرير سريعًا عليه لعرضه في وضع ملء الشاشة أو إغلاقه.
- تتحكّم دالة
onDismissRequestLambda في ما يحدث عندما يحاول المستخدم إغلاق البطاقة السفلية. في هذه الحالة، ستتم إزالة ورقة البيانات فقط.
النتائج
عندما يضغط المستخدم على الزر لأول مرة، تظهر الورقة جزئيًا:
إذا مرّر المستخدم سريعًا للأعلى على البطاقة، ستملأ الشاشة: