Esegui la migrazione da Scorrimento a AnchoredTrascinabile

Swipeable è un'API Compose Material che ti aiuta a creare componenti che possono essere spostati tra stati discreti, come fogli inferiori, riquadri o scorrimento per chiudere. Per supportare meglio i casi d'uso avanzati, come gli ancoraggi che dipendono dalle dimensioni di un componente, è stato pubblicato un successore in Compose-Foundation 1.6.0-alpha01: AnchoredDraggable. AnchoredDraggable è un'API Foundation per la creazione di componenti trascinabili con stati ancorati, ad esempio fogli inferiori, riquadri o funzionalità di scorrimento per chiudere.

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.

Migrazione di SwipeableState a AnchoredDraggableState

Inizia identificando le modifiche al contenitore di stato. AnchoredDraggableState non può essere ereditato e l'offset è rappresentato come Float.NaN prima dell'inizializzazione.

Aggiorna il contenitore di stato

AnchoredDraggableState è una classe finale, il che significa che non può essere ereditata. Se il componente esistente eredita da SwipeableState, aggiorna il tuo contenitore di stato in modo che contenga un riferimento a AnchoredDraggableState anziché ereditarlo:

class MySwitchState: SwipeableState()

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

Poiché il tuo contenitore di stato non eredita più da SwipeableState, potresti dover esporre tu stesso le API. Le API più comuni che puoi utilizzare sono offset, progress, currentValue e targetValue.

Accedere all'offset

A differenza di Swipeable, AnchoredDraggableState's offset è Float.NaN prima di essere inizializzato. In AnchoredDraggable, gli ancoraggi possono essere passati al costruttore di AnchoredDraggableState o aggiornati tramite AnchoredDraggableState#updateAnchors. Il passaggio degli ancoraggi al costruttore di AnchoredDraggableState inizializza immediatamente l'offset.

Se gli ancoraggi dipendono dal layout o potrebbero cambiare, utilizza 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 passare accidentalmente Float.NaN ai componenti, utilizza AnchoredDraggableState#requireOffset per richiedere che l'offset sia stato inizializzato durante la lettura. In questo modo, puoi rilevare incongruenze o possibili bug in una fase iniziale.

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

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 anchor

Definisci gli ancoraggi utilizzando il metodo di creazione DraggableAnchors. Poi, 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 le soglie di posizione

Il tipo e il nome del parametro delle soglie sono cambiati. Invece di 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 posizione di 56dp potrebbe essere espressa come:

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 vengono espresse anche come lambda:

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

Modifiche alla superficie dell'API

Di seguito è riportata una panoramica delle modifiche alla superficie API.

AnchoredDraggableState

Modifier.anchoredDraggable