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

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

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

תוצאות

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

גיליון תחתון שבהתחלה ממלא רק חלק מהמסך. המשתמש יכול להחליק כדי למלא את המסך במודעה או לסגור אותה.
איור 1. גיליון תחתון שמוצג באופן חלקי.

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

גיליון תחתון שהמשתמש הרחיב כדי למלא את המסך.
איור 2. גיליון תחתון במסך מלא.

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