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

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

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

תוצאות

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

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

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

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