يمكنك عرض ورقة في أسفل الشاشة بشكل جزئي ثم السماح للمستخدم إما بعرضها على كامل الشاشة أو إغلاقها.
لإجراء ذلك، مرِّر 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
مضبوطة على false.- تتلقّى الدالة
ModalBottomSheet
معدِّلاً يضمن ملء الشاشة عند توسيعها بالكامل. - تستخدِم
ModalBottomSheet
القيمةsheetState
للمَعلمةsheetState
.- نتيجةً لذلك، لا يتم عرض الورقة بالكامل عند فتحها لأول مرة. يمكن للمستخدم بعد ذلك سحب الإشعار أو التمرير سريعًا عليه لملء الشاشة أو إغلاقه.
- تتحكّم دالة
onDismissRequest
lambda في ما يحدث عندما يحاول المستخدم إغلاق ورقة البيانات السفلية. في هذه الحالة، ستتم إزالة الورقة فقط.
النتائج
عندما يضغط المستخدم على الزر للمرة الأولى، يتم عرض ورقة البيانات جزئيًا:

إذا مرّر المستخدم سريعًا للأعلى على الورقة، ستملأ الشاشة:
