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:
Wischbar
class MySwitchState: SwipeableState()
Verankert ziehbar
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
:
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) }
)
}
UpdateAnchors
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
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
Als |
|
Dieses Konto wird noch nicht unterstützt. Den aktuellen Status finden Sie unter b/288084801. |
|
An |