Von „Swipeable“ zu „AnchoredDraggable“ migrieren

Swipeable ist eine Compose Material API, mit der Sie Komponenten erstellen können, die zwischen verschiedenen Zuständen wischen können, z. B. untere Sheets, Drawers oder „Wischen zum Schließen“. Um erweiterte Anwendungsfälle besser zu unterstützen, z. B. Anker, die von der Größe einer Komponente abhängen, wurde in Compose-Foundation 1.6.0-alpha01 ein Nachfolger veröffentlicht: AnchoredDraggable. AnchoredDraggable ist eine Foundation API zum Erstellen von ziehbaren Komponenten mit verankerten Zuständen, z. B. für untere Bereiche, Auszüge oder Wischen zum Schließen.

Die Swipeable APIs von Material wurden zugunsten der AnchoredDraggable von Foundation eingestellt und werden in einem zukünftigen Release entfernt. In diesem Leitfaden wird die Migration von Swipeable APIs zu AnchoredDraggable beschrieben.

SwipeableState zu AnchoredDraggableState migrieren

Prüfen Sie zuerst, ob sich der Inhaber des Kontos geändert hat. AnchoredDraggableState kann nicht übernommen werden und der Offset wird vor der Initialisierung als Float.NaN dargestellt.

Rechtsinhaber aktualisieren

AnchoredDraggableState ist eine finale Klasse, d. h., sie kann nicht vererbt werden. Wenn Ihre vorhandene Komponente von SwipeableState erbt, aktualisieren Sie den Statusinhaber so, dass er eine Referenz auf die AnchoredDraggableState enthält, anstatt von ihr zu erben:

class MySwitchState: SwipeableState()

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

Da Ihr Statusinhaber keine Übernahme von SwipeableState mehr übernimmt, müssen Sie APIs möglicherweise selbst verfügbar machen. Die gängigsten APIs, die Sie verwenden können, sind offset, progress, currentValue und targetValue.

Auf den Versatz zugreifen

Im Gegensatz zu Swipeable ist offset von AnchoredDraggableState vor der Initialisierung Float.NaN. In AnchoredDraggable können die Anker an den Konstruktor von AnchoredDraggableState übergeben oder über AnchoredDraggableState#updateAnchors aktualisiert werden. Wenn Sie die Anker an den Konstruktor von AnchoredDraggableState übergeben, wird der Offset sofort initialisiert.

Wenn Ihre Anker vom Layout abhängen oder sich ändern könnten, verwenden Sie AnchoredDraggableState#updateAnchors, um zu vermeiden, dass der Status neu erstellt wird, wenn sich die Anker ändern.

Wenn du updateAnchors verwendest, ist der Offset Float.NaN, bevor die Anker an updateAnchors übergeben werden. Um zu vermeiden, dass Float.NaN versehentlich an Komponenten übergeben wird, kannst du mit AnchoredDraggableState#requireOffset festlegen, dass der Offset beim Lesen initialisiert werden muss. So können Sie Inkonsistenzen oder mögliche Fehler frühzeitig erkennen.

@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 zu Modifier.anchoredDraggable migrieren

Modifier.anchoredDraggable() ersetzt Modifier.swipeable. Einige Parameter von Modifier.swipeable() wurden direkt in AnchoredDraggableState verschoben, wie in den folgenden Abschnitten beschrieben.

Anker definieren

Definieren Sie die Anker mit der Builder-Methode DraggableAnchors. Übergeben Sie sie dann an den Konstruktor von AnchoredDraggableState#updateAnchors oder AnchoredDraggableState:

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

Wenn die Anker statisch sind, übergeben Sie sie an den Konstruktor. Wenn sie vom Layout abhängen oder nicht statisch sind, verwenden Sie updateAnchors.

Positionsgrenzwerte definieren

Der Typ und der Name des Parameters „Grenzwerte“ haben sich geändert. Anstatt einer separaten ThresholdConfig-Benutzeroberfläche hat AnchoredDraggableState einen positionalThreshold-Parameter, der eine Lambda-Funktion annimmt, die die Position des Grenzwerts zurückgibt. Ein Positionsgrenzwert von 50% könnte beispielsweise so ausgedrückt werden:

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

Ein Positionsgrenzwert von 56dp könnte so ausgedrückt werden:

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

Geschwindigkeitsgrenzwerte definieren

Geschwindigkeitsgrenzwerte werden ebenfalls an den Konstruktor von AnchoredDraggableState übergeben und als Lambda-Ausdruck angegeben:

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

Änderungen an der API-Oberfläche

Unten finden Sie eine Übersicht über die Änderungen an der API-Oberfläche.

AnchoredDraggableState

Modifier.anchoredDraggable