Swipeable
è un'API Compose Material che consente di creare componenti che
è possibile far scorrere tra stati distinti, ad esempio fogli inferiori, riquadri a scomparsa o
scorrimento per ignorare. Per supportare meglio casi d'uso avanzati, come gli ancoraggi che dipendono dalle dimensioni di un componente, è stato pubblicato un modello successivo in Compose-Foundation 1.6.0-alpha01: AnchoredDraggable
. AnchoredDraggable
è un'API di base per creare componenti trascinabili con stati ancorati, come fogli inferiori, riquadri a scomparsa o scorrimento per ignorare.
Le API Swipeable
di Material sono state ritirate a favore di AnchoredDraggable
di Foundation e verranno rimosse in una release futura. Questa guida descrive come eseguire la migrazione dalle API Swipeable
a AnchoredDraggable
.
Esegui la migrazione di SwipeableState
a AnchoredDraggableState
Inizia identificando le modifiche che riguardano il tuo stato. AnchoredDraggableState
non può essere ereditato e l'offset è rappresentato da Float.NaN
prima di
essere inizializzato.
Aggiorna il titolare dello stato
AnchoredDraggableState
è una classe finale, ovvero non può essere ereditata
da cui è stata ereditata. Se il componente esistente eredita da SwipeableState
, aggiorna il proprietario dello stato in modo che contenga un riferimento a AnchoredDraggableState
anziché ereditarlo da questo:
A scorrimento
class MySwitchState: SwipeableState()
Ancorata trascinabile
class MySwitchState {
private val anchoredDraggableState = AnchoredDraggableState(...)
}
Poiché il proprietario dello stato non eredita più da SwipeableState
, potresti dover esporre le API autonomamente. Le API più comuni che puoi utilizzare sono
offset
, progress
, currentValue
e targetValue
.
Accedi all'offset
A differenza di Swipeable
, il valore offset
di AnchoredDraggableState
è Float.NaN
prima
di essere inizializzato. In AnchoredDraggable
, gli anchor possono essere passati al
costruttore di AnchoredDraggableState
o aggiornati tramite
AnchoredDraggableState#updateAnchors
. Se passi gli ancoraggi al costruttore di AnchoredDraggableState
, l'offset viene inizializzato immediatamente.
Se gli ancoraggi dipendono dal layout o potrebbero cambiare, usa AnchoredDraggableState#updateAnchors
per evitare di ricreare lo stato quando gli ancoraggi cambiano.
Se utilizzi updateAnchors
, l'offset sarà Float.NaN
prima di passare gli ancoraggi a updateAnchors
. Per evitare di trasmettere accidentalmente Float.NaN
ai componenti, usa AnchoredDraggableState#requireOffset
per richiedere che l'offset sia stato inizializzato durante la lettura. Questo ti aiuta a individuare subito
incoerenze o possibili bug.
@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) }
}
}
Esegui la migrazione di Modifier.swipeable
a Modifier.anchoredDraggable
Modifier.anchoredDraggable()
sostituisce Modifier.swipeable
. Alcuni
parametri di Modifier.swipeable()
sono stati spostati direttamente in AnchoredDraggableState
, come descritto nelle sezioni seguenti.
Definisci gli ancoraggi
Definisci gli ancoraggi utilizzando il metodo del generatore DraggableAnchors
. Quindi, passali al costruttore di AnchoredDraggableState#updateAnchors
o AnchoredDraggableState
:
Costruttore
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) }
)
}
Se gli ancoraggi sono statici, passali al costruttore. Se dipendono dal layout o non sono statici, utilizza updateAnchors
.
Definisci soglie di posizionamento
Il tipo e il nome del parametro della soglia sono stati modificati. Anziché avere un'interfaccia ThresholdConfig
separata, AnchoredDraggableState
ha un parametro positionalThreshold
che accetta una funzione lambda che restituisce la posizione della soglia. Ad esempio, una soglia di posizionamento del 50% potrebbe essere espressa come:
val anchoredDraggableState = AnchoredDraggableState(
positionalThreshold = { distance -> distance * 0.5f },
...
)
Una soglia di posizionamento pari a 56dp
può essere espressa come segue:
val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
positionalThreshold = { with(density) { 56.dp.toPx() } },
...
)
Definisci le soglie di velocità
Le soglie di velocità vengono passate anche al costruttore di AnchoredDraggableState
e espresse anche come lambda:
val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
velocityThreshold = { with(density) { 125.dp.toPx() } },
...
)
Modifiche alla piattaforma API
Di seguito è riportata una panoramica delle modifiche alla piattaforma API.
AnchoredDraggableState
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
N/A |
|
|
|
|
|
|
|
|
|
|
|
Modifier.anchoredDraggable
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
Passato al costruttore |
|
Non ancora supportato. Consulta la pagina b/288084801 per lo stato più recente. |
|
Passato al costruttore |