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

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

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

תוצאות

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

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

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

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

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