אתם יכולים להציג כרטיסייה תחתונה באופן חלקי, ואז לאפשר למשתמש להציג אותה במסך מלא או לסגור אותה.
כדי לעשות זאת, מעבירים ל-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קובעת מה קורה כשהמשתמש מנסה לסגור את הגיליון התחתון. במקרה כזה, רק הגיליון יוסר.
תוצאות
בפעם הראשונה שהמשתמש לוחץ על הלחצן, הגיליון מוצג באופן חלקי:
אם המשתמש מחליק למעלה בגיליון, הוא ממלא את המסך:
