Von „Swipeable“ zu „AnchoredDraggable“ migrieren

Swipeable ist eine Compose Material API, mit der du Komponenten erstellen kannst, die zwischen verschiedenen Stadien gewechselt werden können, z. B. untere Tabellenblätter oder Schubladen oder durch 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 Composer 1.6.0-alpha01 ein Nachfolger veröffentlicht: AnchoredDraggable. AnchoredDraggable ist eine Foundation API zum Erstellen ziehbarer Komponenten mit verankerten Status, z. B. Tabellenblätter am unteren Rand, Leisten oder durch 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 dieser Anleitung wird die Migration von Swipeable APIs zu AnchoredDraggable beschrieben.

SwipeableState zu AnchoredDraggableState migrieren

Beginnen Sie damit, Änderungen an Ihrem Bundesstaat zu ermitteln. AnchoredDraggableState kann nicht übernommen werden und der Offset wird als Float.NaN dargestellt, bevor er initialisiert wird.

Inhaber des Bundesstaates aktualisieren

AnchoredDraggableState ist eine endgültige Klasse, d. h. sie kann nicht übernommen werden. Wenn Ihre vorhandene Komponente SwipeableState übernimmt, aktualisieren Sie den Statusinhaber so, dass ein Verweis auf das AnchoredDraggableState enthalten ist, anstatt es von ihm zu übernehmen:

class MySwitchState: SwipeableState()

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

Da der Inhaber des Status keine Änderungen mehr von SwipeableState ü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 Offset zugreifen

Im Gegensatz zu Swipeable ist der offset von AnchoredDraggableState Float.NaN, bevor er initialisiert wird. In AnchoredDraggable können die Anker an den Konstruktor von AnchoredDraggableState übergeben oder über AnchoredDraggableState#updateAnchors aktualisiert werden. Durch die Übergabe der Anker an den Konstruktor von AnchoredDraggableState wird der Versatz sofort initialisiert.

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

Wenn Sie updateAnchors verwenden, beträgt der Offset Float.NaN, bevor die Anker an updateAnchors übergeben werden. Damit Float.NaN nicht versehentlich an Komponenten übergeben wird, verwenden Sie AnchoredDraggableState#requireOffset. Damit legen Sie fest, dass der Offset beim Lesen initialisiert wurde. 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 Modifier.swipeable()-Parameter wurden direkt zu 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.

Positionsschwellen definieren

Typ und Name des Parameters für Schwellenwerte wurden geändert. Anstelle einer separaten ThresholdConfig-Schnittstelle hat AnchoredDraggableState einen positionalThreshold-Parameter, der eine Lambda-Funktion verwendet, die die Position des Schwellenwerts zurückgibt. Ein Positionsschwellenwert von 50% könnte beispielsweise so ausgedrückt werden:

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

Ein Positionsschwellenwert 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 auch an den Konstruktor von AnchoredDraggableState übergeben und als Lambda ausgedrückt:

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

Änderungen an der API-Oberfläche

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

AnchoredDraggableState

Modifier.anchoredDraggable