Migracja z przesuwnego do AnchoredDraggable

Swipeable to interfejs Compose Material API, który pomaga tworzyć komponenty, można przesuwać między dyskretnymi stanami, takimi jak dolne arkusze, szuflady przesuń palcem, aby ją zamknąć. Aby lepiej obsługiwać zaawansowane przypadki użycia, takie jak reklamy zakotwiczone, zależą od rozmiaru komponentu, jego następca został opublikowany Compose-Foundation 1.6.0-alpha01: AnchoredDraggable. AnchoredDraggable to interfejs API Foundation służący do tworzenia przeciąganych komponentów ze stanami zakotwiczonymi, takimi jak jako arkusze dolne, szuflady lub elementy szuflady, aby je zamknąć.

Interfejsy API Material Swipeable zostały wycofane i zastąpione przez Foundation AnchoredDraggable i zostanie usunięta w przyszłej wersji. Ten przewodnik zawiera informacje o migracji z interfejsów API Swipeable do AnchoredDraggable.

Przenieś SwipeableState do AnchoredDraggableState

Zacznij od wskazania zmian u sprzedawcy stanu. AnchoredDraggableState nie może być dziedziczony z, a przesunięcie jest podane jako Float.NaN przed

Zaktualizuj właściciela stanu

AnchoredDraggableState jest klasą końcową, co oznacza, że nie może być dziedziczona . Jeśli dotychczasowy komponent dziedziczy z SwipeableState, zaktualizuj podmiotowi stanu w celu uzyskania odnośnika do AnchoredDraggableState zamiast dziedziczenie z niego:

class MySwitchState: SwipeableState()

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

Twój właściciel stanu nie dziedziczy już stanu z: SwipeableState, dlatego może być konieczne samodzielne udostępnienie interfejsów API. Najczęściej używane interfejsy API to offset, progress, currentValue i targetValue.

Dostęp do przesunięcia

W przeciwieństwie do społeczności Swipeable, offset użytkownika AnchoredDraggableState ma wartość Float.NaN przed jego zainicjowanie. W AnchoredDraggable reklamy zakotwiczone można przekazywać do Konstruktor interfejsu AnchoredDraggableState lub zaktualizowany za pomocą AnchoredDraggableState#updateAnchors. Przekazywanie reklam zakotwiczonych do Konstruktor AnchoredDraggableState natychmiast inicjuje przesunięcie.

Jeśli kotwice zależą od układu lub mogą się zmienić, użyj funkcji AnchoredDraggableState#updateAnchors, aby uniknąć odtwarzania stanu, gdy reklamy zakotwiczone zmieniają się.

Jeśli użyjesz updateAnchors, przesunięcie będzie wynosić Float.NaN przed przekazaniem wartości zakotwicza element updateAnchors. Aby uniknąć przypadkowego przekazywania Float.NaN do , użyj AnchoredDraggableState#requireOffset, by wymagać, by zostało zainicjowane podczas odczytu. Dzięki temu możesz wyłapać niespójności i ewentualnych błędów.

@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) }
    }
}

Przenieś Modifier.swipeable do Modifier.anchoredDraggable

Modifier.anchoredDraggable() zastępuje Modifier.swipeable. Niektóre z parametrów Modifier.swipeable() zostało przeniesionych do: AnchoredDraggableState bezpośrednio w sposób opisany w kolejnych sekcjach.

Zdefiniuj kotwice

Zdefiniuj reklamy zakotwiczone za pomocą metody kreatora DraggableAnchors. Następnie je do: AnchoredDraggableState#updateAnchors lub AnchoredDraggableState użytkownika konstruktor:

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) }
    )
}

Jeśli kotwice są statyczne, przekaż je do konstruktora. W zależności od tego, układu strony bądź nie są statyczne, użyj parametru updateAnchors.

Określanie progów pozycji

Zmienił się typ i nazwa parametru progów. Zamiast oddzielnym interfejsem ThresholdConfig, AnchoredDraggableState ma Parametr positionalThreshold, który przyjmuje funkcję lambda, która zwraca pozycji progu. Na przykład próg pozycji wynoszący 50% może być wyrażony jako:

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

Próg pozycji wynoszący 56dp może zostać przedstawiony jako:

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

Zdefiniuj progi prędkości

Progi szybkości są również przekazywane do konstruktora AnchoredDraggableState, a także lambda:

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

Zmiany w interfejsie API

Poniżej znajdziesz omówienie zmian w interfejsie API.

AnchoredDraggableState

Modifier.anchoredDraggable