Esegui la migrazione da Scorrimento a AnchoredTrascinabile

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:

class MySwitchState: SwipeableState()

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:

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

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

Modifier.anchoredDraggable