גיליון תחתון חלקי

אפשר להציג גיליון תחתון באופן חלקי, ואז לאפשר למשתמש להציג אותו במסך מלא או לסגור אותו.

כדי לעשות זאת, מעבירים ל-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)
                )
            }
        }
    }
}
BottomSheet.kt

נקודות עיקריות לגבי הקוד

בדוגמה הזו, חשוב לשים לב לפרטים הבאים:

• ההגדרה showBottomSheet קובעת אם האפליקציה תציג את הגיליון התחתון.
• ‫sheetState הוא מופע של SheetState כאשר skipPartiallyExpanded הוא false.
• ‫ModalBottomSheet מקבל משנה שמבטיח שהחלון יתפוס את המסך כשהוא מורחב במלואו.
• ‫ModalBottomSheet מקבל את הערך sheetState לפרמטר sheetState שלו.
  • כתוצאה מכך, הגיליון מוצג באופן חלקי בלבד בפעם הראשונה שהוא נפתח. המשתמש יכול לגרור או להחליק את ההודעה כדי להציג אותה במסך מלא או כדי לסגור אותה.
• פונקציית ה-lambda‏ onDismissRequest קובעת מה קורה כשהמשתמש מנסה לסגור את הגיליון התחתון. במקרה כזה, רק הגיליון יוסר.

תוצאות

בפעם הראשונה שהמשתמש לוחץ על הכפתור, הגיליון מוצג באופן חלקי:

אם המשתמש מחליק כלפי מעלה בגיליון, הוא ממלא את המסך:

מקורות מידע נוספים

• גיליונות תחתונים