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

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

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

תוצאות

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

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

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

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

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