Passer de Swipeable à AnchoredDraggable

Swipeable est une API Compose Material qui vous aide à créer des composants entre lesquels il est possible de balayer entre des états distincts, tels que des feuilles inférieures, des tiroirs ou des composants à balayer pour fermer. Pour mieux prendre en charge les cas d'utilisation avancés, tels que les ancres qui dépendent de la taille d'un composant, un successeur a été publié dans Compose-Foundation 1.6.0-alpha01 : AnchoredDraggable. AnchoredDraggable est une API Foundation permettant de créer des composants déplaçables avec des états ancrés, tels que des feuilles inférieures, des tiroirs ou des composants à balayer pour fermer.

Les API Swipeable de Material sont obsolètes au profit de AnchoredDraggable de Foundation et seront supprimées dans une prochaine version. Ce guide explique comment migrer des API Swipeable vers AnchoredDraggable.

Migrer SwipeableState vers AnchoredDraggableState

Commencez par identifier les modifications apportées à votre détenteur d'état. AnchoredDraggableState ne peut pas être hérité, et le décalage est représenté par Float.NaN avant son initialisation.

Mettre à jour votre conteneur d'état

AnchoredDraggableState est une classe finale, ce qui signifie qu'elle ne peut pas être héritée. Si votre composant existant hérite de SwipeableState, mettez à jour votre conteneur d'état pour qu'il contienne une référence à AnchoredDraggableState au lieu d'en hériter :

class MySwitchState: SwipeableState()

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

Étant donné que votre détenteur d'état n'hérite plus de SwipeableState, vous devrez peut-être exposer vous-même les API. Les API les plus courantes que vous pouvez utiliser sont offset, progress, currentValue et targetValue.

Accéder au décalage

Contrairement à Swipeable, le offset de AnchoredDraggableState est Float.NaN avant son initialisation. Dans AnchoredDraggable, les ancres peuvent être transmises au constructeur de AnchoredDraggableState ou mises à jour via AnchoredDraggableState#updateAnchors. Le transfert des ancres au constructeur de AnchoredDraggableState initialise immédiatement le décalage.

Si vos ancres dépendent de la mise en page ou peuvent changer, utilisez AnchoredDraggableState#updateAnchors pour éviter de recréer l'état lorsque les ancres changent.

Si vous utilisez updateAnchors, le décalage sera Float.NaN avant de transmettre les ancres à updateAnchors. Pour éviter de transmettre accidentellement Float.NaN aux composants, utilisez AnchoredDraggableState#requireOffset pour exiger que le décalage ait été initialisé lors de sa lecture. Cela vous permet de détecter rapidement les incohérences ou les éventuels bugs.

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

Migrer Modifier.swipeable vers Modifier.anchoredDraggable

Modifier.anchoredDraggable() remplace Modifier.swipeable. Certains paramètres de Modifier.swipeable() ont été directement déplacés vers AnchoredDraggableState, comme décrit dans les sections suivantes.

Définir des ancres

Définissez les ancres à l'aide de la méthode de compilation DraggableAnchors. Ensuite, transmettez-les au constructeur de AnchoredDraggableState#updateAnchors ou 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) }
    )
}

Si les ancres sont statiques, transmettez-les au constructeur. S'ils dépendent de la mise en page ou ne sont pas statiques, utilisez updateAnchors.

Définir des seuils de position

Le type et le nom du paramètre de seuils ont changé. Au lieu d'avoir une interface ThresholdConfig distincte, AnchoredDraggableState possède un paramètre positionalThreshold qui accepte une fonction lambda renvoyant la position du seuil. Par exemple, un seuil de position de 50% peut être exprimé comme suit :

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

Un seuil positionnel de 56dp peut être exprimé comme suit :

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

Définir des seuils de vitesse

Les seuils de vitesse sont également transmis au constructeur de AnchoredDraggableState et exprimés sous forme de lambda :

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

Modifications apportées à la surface de l'API

Vous trouverez ci-dessous un aperçu des modifications apportées à la surface de l'API.

AnchoredDraggableState

Modifier.anchoredDraggable