Modifier 滑动(Swipeable)


Modifier 滑动(Swipeable)

swipeable 修饰符允许开发者通过锚点设置从而实现组件呈现吸附效果的动画,常用于开关等动画,也可用于下拉刷新等特殊效果的实现。

swipeable 修饰符不会为被修饰的组件提供任何默认动画,只能为组件提供手势偏移量等信息。开发者可根据自身需求根据偏移量结合其他修饰符定制动画展示。

fun <T : Any?> Modifier.swipeable(
    state: SwipeableState<T>,
    anchors: Map<Float, T>,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    interactionSource: MutableInteractionSource? = null,
    thresholds: (from, to) -> ThresholdConfig = { _, _ -> FixedThreshold(56.dp) },
    resistance: ResistanceConfig? = resistanceConfig(anchors.keys),
    velocityThreshold: Dp = VelocityThreshold
)
  • state: 通过 swipeableState 的设置可以获取到当前手势的偏移量信息
  • anchors: 锚点,可以通过锚点设置在不同状态时所应该对应的偏移量信息
  • orientation: 手势方向,被修饰组件的手势方向只能是水平或垂直
  • enabled: 启用滑动
  • reverseDirection: 反转滚动的方向,从上到下滚动将表现为从下到上,从左到右将表现为从右到左。
  • interactionSource: 滑动时发出此状态
  • thresholds: 常用作定制不同锚点间吸附效果的临界阈值,常用有 FixedThreshold(Dp)FractionalThreshold(Float)
  • resistance: 控制滑动越过边界时将应用多少阻力。
  • velocityThreshold: 最终速度必须超过的阈值(以 dp 为单位)以动画到下一个状态
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SwipeableDemo() {
    // Draw a slider-like composable consisting of a red square moving along a
    // black background, with three states: "A" (min), "B" (middle), and "C" (max).
    val width = 350.dp
    val squareSize = 50.dp

    val swipeableState = rememberSwipeableState("A")
    val sizePx = with(LocalDensity.current) { (width - squareSize).toPx() }
    val anchors = mapOf(0f to "A", sizePx / 2 to "B", sizePx to "C")

    Box(
        modifier = Modifier
            .width(width)
            .swipeable(
                state = swipeableState,
                anchors = anchors,
                thresholds = { _, _ -> FractionalThreshold(0.5f) },
                orientation = Orientation.Horizontal
            )
            .background(Color.Black)
    ) {
        Box(
            Modifier
                .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) }
                .size(squareSize)
                .background(Color.Red),
            contentAlignment = Alignment.Center
        ) {
            Text(swipeableState.currentValue, color = Color.White, fontSize = 24.sp)
        }
    }
}

文章作者: Vinx
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Vinx !
 上一篇
Modifier 拖动(Draggable) Modifier 拖动(Draggable)
Modifier 拖动(Draggable) draggable 修饰符允许开发者监听UI组件的拖动手势偏移量,通过偏移量从而可以定制UI动画效果。 draggable 修饰符只能监听垂直方向偏移或水平方向偏移。 fun Modif
下一篇 
Modifier 点击(Clickable & CombinedClickable) Modifier 点击(Clickable & CombinedClickable)
Modifier 点击(Clickable & CombinedClickable) 1. Clickable 点击 Clickable 修饰符用来监听组件的点击操作,并且当点击事件发生时会为被点击的组件施加一个波纹涟漪效果
  目录