This is the third day of my participation in Gwen Challenge

There is currently a Chinese manual project for Jetpack Compose, which aims to help developers better understand and master the Compose framework. This article, written by myself, has been published in the handbook, welcome to refer to.

What does a Draggable do

The Draggable modifier allows developers to listen to the UI component’s drag gesture offset, which allows them to customize the UI animation.

Note that the Draggable modifier can only listen for vertical or horizontal offsets.

2. Draggable parameter list

Using the draggable modifier requires passing in at least two parameters, draggableState and orientation

DraggableState: draggableState allows you to get the offset of a drag gesture and allows the developer to dynamically control the offset

Orientation: Monitor the drag gesture direction, can only be Horizontal or Vertical.

fun Modifier.draggable(
    state: DraggableState,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    startDragImmediately: Boolean = false,
    onDragStarted: suspend CoroutineScope. (startedPosition: Offset) - >Unit = {},
    onDragStopped: suspend CoroutineScope. (velocity: Float) - >Unit = {},
    reverseDirection: Boolean = false
)
Copy the code

3. Draggable example

In this section, we will use the Draggable modifier to complete a simple slider drag animation.

First we define the slider offset and the edge length of the slider.

Get the DraggableState instance through the rememberDraggableState method, listen for the current offset and accumulate by calling lambda back, and limit the offset range of the slider.

var offsetX by remember {mutableStateOf(0f)}
val boxSideLengthDp = 50.dp
val boxSildeLengthPx = with(LocalDensity.current) {
    boxSideLengthDp.toPx()
}
val draggableState = rememberDraggableState {
    offsetX = (offsetX + it).coerceIn(0f.3 * boxSildeLengthPx)
}
Copy the code

Next we’ll provide the DragGable modifier for draggableState and orientation.

Note: Offset must precede draggable and background since Modifer is executed chained.

⚠️ Error Example 1(draggable before offset): The second drag of the UI control takes effect only at the initial position and does not move the listener along with the UI control. The reason is that the draggable listens to the initial position, not the offset position.

⚠️ Error Example 2(background before offset): Black blocks drawn by UI controls will not follow because background is drawn at the original position, not the offset position, each time.

Box(
    Modifier
        .width(boxSideLengthDp * 4)
        .height(boxSideLengthDp)
        .background(Color.LightGray)
) {
    Box(
        Modifier
            .size(boxSideLengthDp)
            .offset {
                IntOffset(offsetX.roundToInt(), 0)
            }
            .draggable(
                orientation = Orientation.Horizontal,
                state = draggableState
            )
            .background(Color.DarkGray)
    )
}
Copy the code

Results show