מעבר מניתנת להחלקה לגרירה במעוגנות

Swipeable הוא ממשק API של Compose Material API שעוזר ליצור רכיבים לעבור בין מצבים נפרדים, כגון גיליונות תחתונים, מגירות או החלקה כדי לסגור. כדי לספק תמיכה טובה יותר בתרחישים מתקדמים לדוגמה, כמו עוגנים בהתאם לגודל של רכיב, פורסם רצף המרות הגדרת פיתוח נייטיב 1.6.0-alpha01: AnchoredDraggable. AnchoredDraggable הוא Fundamentals API שמשמש לפיתוח רכיבים שניתנים לגרירה עם מצבים מעוגנים, כגיליונות תחתונים, חלונית הזזה או החלקה לסגירה.

ממשקי ה-API מסוג Swipeable של Material הוצאו משימוש לטובת AnchoredDraggable ותוסר בגרסה עתידית. המדריך הזה מוסבר איך לעבור מממשקי API של Swipeable אל AnchoredDraggable.

העברה של SwipeableState אל AnchoredDraggableState

קודם כל, מזהים שינויים שבוצעו בחשבון של בעל המדינה. AnchoredDraggableState לא ניתן לרשת ממנו, וההיסט מיוצג בתור Float.NaN לפניו מאותחל.

עדכון של בעל המדינה

AnchoredDraggableState הוא מחלקה סופית, כלומר לא ניתן לרשת אותו מ. אם הרכיב הקיים יורש מ-SwipeableState, צריך לעדכן בעל המדינה שלך לשמור הפניה אל AnchoredDraggableState במקום עוברת בירושה ממנו:

class MySwitchState: SwipeableState()

class MySwitchState {
    private val anchoredDraggableState = AnchoredDraggableState(...)
}

בעל המדינה שלך לא יורש יותר מ-SwipeableState, לכן אולי תצטרכו לחשוף ממשקי API בעצמכם. ממשקי ה-API הנפוצים ביותר שבהם אפשר להשתמש הם offset, progress, currentValue ו-targetValue.

גישה להיסט

שלא כמו בSwipeable, הoffset של AnchoredDraggableState הוא Float.NaN לפני הוא מאותחל. בטווח AnchoredDraggable, ניתן להעביר את העוגנים אל ה-constructor של AnchoredDraggableState או עודכן באמצעות AnchoredDraggableState#updateAnchors. העברת העוגנים אל ה-constructor של AnchoredDraggableState מאתחל את ההיסט באופן מיידי.

אם העוגנים תלויים בפריסה או יכולים להשתנות, צריך להשתמש AnchoredDraggableState#updateAnchors כדי להימנע מיצירה מחדש של המצב כאשר משתנהי עוגן משתנים.

אם משתמשים ב-updateAnchors, ההיסט יהיה Float.NaN לפני העברת עוגן אל updateAnchors. כדי להימנע מהעברה בטעות של Float.NaN אל רכיבים, צריך להשתמש ב-AnchoredDraggableState#requireOffset כדי לדרוש הקיזוז אותחל כשקוראים אותו. זה עוזר לך לתפוס חוסר עקביות או באגים אפשריים בשלב מוקדם.

@Composable
fun AnchoredDraggableBox() {
    val state = remember { AnchoredDraggableState(...) }
    val density = LocalDensity.current
    val anchors = remember { DraggableAnchors { ... } }
    SideEffect {
        state.updateAnchors(anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    }
}

העברה של Modifier.swipeable אל Modifier.anchoredDraggable

Modifier.anchoredDraggable() מחליף את Modifier.swipeable. במידה מסוימת מתוך הפרמטרים של Modifier.swipeable() הועברו אל AnchoredDraggableState ישירות, כפי שמתואר בסעיפים הבאים.

הגדרת עוגנים

מגדירים את העוגנים באמצעות שיטת ה-builder DraggableAnchors. לאחר מכן, מעבירים אותם אל AnchoredDraggableState#updateAnchors או אל AnchoredDraggableState constructor:

enum class DragValue { Start, Center, End }

@Composable
fun AnchoredDraggableBox() {
    val anchors = DraggableAnchors {
        Start at -100.dp.toPx()
        Center at 0f
        End at 100.dp.toPx()
    }
    val state = remember {
        AnchoredDraggableState(anchors = anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    )
}

enum class DragValue { Start, Center, End }

@Composable
fun AnchoredDraggableBox() {
    val state = remember { AnchoredDraggableState(...) }
    val density = LocalDensity.current
    val anchors = with (density) {
        DraggableAnchors {
            Start at -100.dp.toPx()
            Center at 0f
            End at 100.dp.toPx()
        }
    }
    SideEffect {
        state.updateAnchors(anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    )
}

אם העוגנים סטטיים, מעבירים אותם ל-constructor. אם הם תלויים פריסה או שהן לא סטטיות, צריך להשתמש ב-updateAnchors.

הגדרת ערכי סף לפי מיקום

הסוג והשם של פרמטר הסף השתנו. במקום בממשק ThresholdConfig נפרד, ב-AnchoredDraggableState יש פרמטר positionalThreshold שלוקח פונקציית lambda שמחזירה את במיקום של הסף. לדוגמה, סף מיקום של 50% יכול להיות מבוטאת כך:

val anchoredDraggableState = AnchoredDraggableState(
    positionalThreshold = { distance -> distance * 0.5f },
    ...
)

אפשר לבטא את סף המיקום של 56dp כך:

val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
    positionalThreshold = { with(density) { 56.dp.toPx() } },
    ...
)

הגדרת ערכי סף של מהירות

ערכי הסף של המהירות מועברים גם הם ל-constructor של AnchoredDraggableState, וגם מבוטאת בתור lambda:

val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
    velocityThreshold = { with(density) { 125.dp.toPx() } },
    ...
)

שינויים בפלטפורמת ה-API

בהמשך תוכלו למצוא סקירה כללית של השינויים בפלטפורמת ה-API.

AnchoredDraggableState

Modifier.anchoredDraggable