Compose 手势处理，增进交互体验

news/2025/2/27 8:36:35

Compose 手势处理，增进交互体验

  • 概述
  • 常用手势处理Modifier
    • clickable()
    • combinedClickable()
    • draggable()
    • swipeable()
    • transformable()
    • scrollable()
    • nestedScroll
      • NestedScrollConnection
      • NestedScrollDispatcher
  • 定制手势处理
    • 使用 PointerInput Modifier
      • PointerInputScope
    • awaitPointerEventScope

概述

在处理手势时，应将手势处理修饰符尽可能放到 Modifier 末尾，从而可以避免产生不可预期的行为。

常用手势处理Modifier

clickable()

监听点击事件，在绝大多数情况下，只需要出入 onClick 回调即可。当然也可以将 enable 参数设置为一个可变状态，通过状态来动态控制启用点击监听。

uiltin">@Composable
private fun GestureOfClick(){
    var colorState by remember { mutableStateOf(false) }
    Box(modifier = Modifier
        .size(60.dp)
        .background(color = if (colorState) Color.LightGray else Color.Gray)
        .clickable { colorState = !colorState },
        contentAlignment = Alignment.Center
    ){
        Text(text = "点击")
    }
}

combinedClickable()

和 clickable() 类似，但支持长按/双击/单击：

// Clickable.kt
fun Modifier.combinedClickable(
  enabled: Boolean = true,
  onClickLabel: String? = null,
  role: Role? = null,
  onLongClickLabel: String? = null,
  onLongClick: (() -> Unit)? = null,
  onDoubleClick: (() -> Unit)? = null,
  onClick: () -> Unit
)

draggable()

只支持检测单一方向的拖动（水平方向或垂直方向），不支持同时监听两个方向上的拖动偏移，要实现这种效果，需要使用更底层的 PointerInputModifier。

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//是否反转方向。
): Modifier

swipeable()

可以拖动元素，释放后，这些元素通常朝一个方向定义的两个或多个锚点继续滑动以呈现动画效果。其常见用途是实现“滑动关闭”模式。

必传的参数有：

  • state:是一个SwipeableState，可以记录当前的偏移数据
  • anchors:锚点，用来记录不同滑动数据对应的状态
  • orientation:滑动方向
  • thresholds:不同锚点之间的临界值

transformable()

多点触控，在日常生活当中，多点触控这样的操作多数是在浏览图片，网页或者地图之类的场景下被用到
transformable有三个参数：

  • state：TransformableState，用来获取多点触控时候目标组件大小，位移，旋转角度变化情况的
  • lockRotationOnZoomPan：Boolean，这个参数的意思是如果设置为false,那么多点触控的时候将会同时监听双指拖动，缩放以及旋转，但是如果设置为true的时候，除非旋转动作比其余两个动作先执行，这样会被监听到，不然的话，只会监听双指拖动和缩放动作，旋转事件将不会被监听
  • enabled：Boolean，是否可用
uiltin">@Composable
private fun TransformableSample() {
    // set up all transformation states
    var scale by remember { mutableStateOf(1f) }
    var rotation by remember { mutableStateOf(0f) }
    var offset by remember { mutableStateOf(Offset.Zero) }
    val state = rememberTransformableState { zoomChange, offsetChange, rotationChange ->
        scale *= zoomChange
        rotation += rotationChange
        offset += offsetChange
    }
    Box(
        Modifier
            // apply other transformations like rotation and zoom
            // on the pizza slice emoji
            .graphicsLayer(
                scaleX = scale,
                scaleY = scale,
                rotationZ = rotation,
                translationX = offset.x,
                translationY = offset.y
            )
            // add transformable to listen to multitouch transformation events
            // after offset
            .transformable(state = state)
            .background(Color.Blue)
            .fillMaxSize()
    )
}

scrollable()

虽然 verticalScroll() / horizontalScroll() 和 scrollable() 的名字很像，但它们并不是相同的东西，scrollable() 修饰符仅负责检测滚动手势，并不会帮我们自动偏移元素内容，滚动行为由开发者定义，用法类似 draggable() 修饰符

var offsetX by remember { mutableFloatStateOf(0f) }
Column {
  Text(text = "OffsetX: $offsetX")
  Box(
    Modifier
    .size(200.dp)
    .background(Pink)
    .scrollable(
      // 检测水平方向的滚动手势
      orientation = Orientation.Horizontal,
      // 使用 rememberScrollableState 创建并传递一个 ScrollableState 对象。
      // 通过 ScrollableState 可以获取到滚动手势的偏移量，进一步定义滚动行为。
      state = rememberScrollableState { delta ->
        offsetX += delta
        delta // 为了支持嵌套滚动，必须返回消费的滚动距离量
      }
    )
  )
}

nestedScroll

嵌套滑动，需要传递两个参数，connection: NestedScrollConnection 和 dispatcher: NestedScrollDispatcher，源码如下：

fun Modifier.nestedScroll(
    connection: NestedScrollConnection,
    dispatcher: NestedScrollDispatcher? = null
){...}
  1. connection：包含了嵌套滑动的和姓逻辑，通过回调可以在子布局获得滑动事件前，预先消费掉部分或全部手势偏移量，当然也可以获取子布局消费后剩下的手势偏移量。
  2. dispatcher：包含用于父布局的NestedScrollConnection，可以使用包含的 dispatch**系列方法动态控制组件完成滑动。

NestedScrollConnection

interface NestedScrollConnection {
	fun onPreScroll(available: Offset, source: NestedScrollSource): Offset = Offset.Zero
	fun onPostScroll(consumed: Offset,available: Offset,source: NestedScrollSource): Offset = Offset.Zero
	suspend fun onPreFling(available: Velocity): Velocity = Velocity.Zero
	suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {return Velocity.Zero}
}
  • onPreScroll：在子控件滑动之前，会先使用NestedScrollDispatcher询问父控件是否需要消费available的偏移量，父控件可以在该方法内计算自身需要消费的量，然后返回自身消费了的偏移量。
  • onPostScroll：在子控件滑动之后，会使用NestedScrollDispatcher通知父控件，告知其consumed的偏移量以及剩余available的偏移量，而父控件则可以根据情况判断是否还要再偏移，以及使用和子控件同等的偏移还是剩余的偏移。完成之后返回自身消费了的偏移量
  • onPreFling：在子控件进行惯性滑行之前，会先使用NestedScrollDispatcher询问父控件是否需要消费available的速度值，父控件可以在该方法内计算自身需要消费的量，然后返回自身消费了的速度值
  • onPostFling：在子控件进行惯性滑行之后，会使用NestedScrollDispatcher通知父控件，告知其consumed的速度值以及剩余available的速度值，而父控件则可以根据情况判断是否还要再偏移，以及使用和子控件同等的速度还是剩余的速度。完成之后返回自身消费了的速度值。

一句话概括：在滑动前父控件可以通过onPreScroll回调先消费部分或全部偏移量；待子控件消费完后，父控件依旧可以通过onPostScroll方法进行消费，区别在于在onPreScroll回调中，父控件是优先消费的，而onPostScroll则是子控件优先消费，fling的两个方法同理。

NestedScrollDispatcher

class NestedScrollDispatcher {
	// ....
	// 在滑动之前调用，将可用的偏移量传递给父控件
    fun dispatchPreScroll(available: Offset, source: NestedScrollSource): Offset {
        return parent?.onPreScroll(available, source) ?: Offset.Zero
    }
    //在滑动之后调用，将已经消费的偏移量以及剩余可用的偏移量传递给父控件
    fun dispatchPostScroll(consumed: Offset,available: Offset,source: NestedScrollSource): Offset {
        return parent?.onPostScroll(consumed, available, source) ?: Offset.Zero
    }
    //在滑动之后，如果产生了惯性滑动，那么需要将相应的速度值传递给父控件
    suspend fun dispatchPreFling(available: Velocity): Velocity {
       return parent?.onPreFling(available) ?: Velocity.Zero
    }
    //在惯性滑动之后，需要将已经消费了的速度值以及剩余可用的速度值传递给父控件
    suspend fun dispatchPostFling(consumed: Velocity, available: Velocity): Velocity {
        return parent?.onPostFling(consumed, available) ?: Velocity.Zero
    }

一句话概括：通过dispatchPreScroll方法询问父控件是否需要消费，方法返回的就是父控件消费了的量，然后就可以做自己的滑动操作了，在滑动完成之后，再通过dispatchPostScroll方法通知父控件。

定制手势处理

前面提到的手势处理修饰符都是基于低级别的 pointerInput 修饰符进行封装实现的。

使用 PointerInput Modifier

// SuspendingPointerInputFilter.kt
fun Modifier.pointerInput(
  key1: Any?, 
  block: suspend PointerInputScope.() -> Unit
): Modifier
  • keys：当 Composable 发生重组时，如果传入的 keys 发生了变化，则手势事件处理过程会被中断
  • block：在这个 PointerInputScope 作用域代码块中，变可以声明手势事件的处理逻辑了，发生在协程中。

PointerInputScope

  • detectTapGestures()：设置更细粒度的点击监听回调
  • detectDragGestures()：设置更细粒度的拖动手势监听回调
  • detectTransformGestures()：双指拖动、缩放与旋转手势操作中更具体的手势信息
  • detectDragGesturesAfterLongPress()：监听长按后的拖动手势
  • detectHorizontalDragGestures()：监听水平拖动手势
  • detectVerticalDragGestures()：监听垂直拖动手势
  • forEachGesture：允许用户可以对每一个手势事件序列进行相同的定制处理

awaitPointerEventScope

AwaitPointerEventScope 作用域中，可以使用 Compose 中所有低级别的手势处理挂起方法。

suspend fun <R> awaitPointerEventScope(
    block: suspend AwaitPointerEventScope.() -> R
): R
API名称作用
awaitPointerEvent手势事件
awaitFirstDown第一根手指的按下事件
drag拖动事件
horizontalDrag水平拖动事件
verticalDrag垂直拖动事件
awaitDragOrCancellation单次拖动事件
awaitHorizontalDragOrCancellation单次水平拖动事件
awaitVerticalDragOrCancellation单次垂直拖动事件
awaitTouchSlopOrCancellation有效拖动事件
awaitHorizontalTouchSlopOrCancellation有效水平拖动事件
awaitVerticalTouchSlopOrCancellation有效垂直拖动事件

参考资料：巧用Compose来实现手势拖拽效果


http://www.niftyadmin.cn/n/5869813.html

相关文章

全星QMS软件系统：制造业质量管理的全面优化与创新研究

全星QMS软件系统：制造业质量管理的全面优化与创新研究

全星QMS软件系统&#xff1a;制造业质量管理的全面优化与创新 引言 在制造业中&#xff0c;质量管理是企业生存与发展的核心竞争力之一。随着市场竞争的加剧和技术的不断进步&#xff0c;传统的质量管理方式已难以满足现代制造业对高效、精准、协同的要求。全星质量管理QMS软…
阅读更多...
SpringBoot同一功能处理

SpringBoot同一功能处理

一、拦截器 1.1 什么是拦截器&#xff1f; 拦截器是Spring框架提供的核心功能之一&#xff0c;主要用来拦截用户的请求&#xff0c;在指定方法前后&#xff0c;根据业务需要执行预先设定的代码. 也就是说&#xff0c;允许开发人员提前预定义一些逻辑&#xff0c;在用户的请求…
阅读更多...
java后端开发day21--面向对象进阶（二）--继承进阶

java后端开发day21--面向对象进阶（二）--继承进阶

&#xff08;以下内容全部来自上述课程&#xff09; 1.继承 1.子类到底能继承父类中的哪些内容&#xff1f; 构造方法&#xff08;纯不能&#xff09; 非私有&#xff1a;不能 private&#xff1a;不能 比如&#xff1a;把构造变量看成自己&#xff0c;爹就是爹&#xff0c…
阅读更多...
Oracle 12c Docker安装问题排查 sga_target 1536M is too small

Oracle 12c Docker安装问题排查 sga_target 1536M is too small

一、问题描述 在虚拟机环境&#xff08;4核16GB内存&#xff09;上部署 truevoly/oracle-12c 容器镜像时&#xff0c;一切运行正常。然而&#xff0c;当在一台 128 核 CPU 和 512GB 内存的物理服务器上运行时&#xff0c;容器启动时出现了 ORA-00821 等错误&#xff0c;提示 S…
阅读更多...
应用的负载均衡

应用的负载均衡

概述 负载均衡&#xff08;Load Balancing&#xff09; 调度后方的多台机器&#xff0c;以统一的接口对外提供服务&#xff0c;承担此职责的技术组件被称为“负载均衡”。 负载均衡器将传入的请求分发到应用服务器和数据库等计算资源。负载均衡是计算机网络中一种用于优化资源利…
阅读更多...
大模型最新面试题系列：深度学习基础（一）

大模型最新面试题系列：深度学习基础（一）

1. 反向传播中梯度消失的本质原因是什么&#xff1f;如何量化梯度消失的程度&#xff1f; 本质原因 在神经网络的反向传播过程中&#xff0c;梯度是通过链式法则来计算的。假设一个简单的多层神经网络&#xff0c;每一层的输出 y i y_i yi​ 是由前一层的输出 x i x_i xi​…
阅读更多...
Vite vs Webpack

Vite vs Webpack

1. Vite 比 Webpack 快在哪里&#xff1f; 开发模式的差异 Webpack&#xff1a;在开发环境中&#xff0c;Webpack 是先打包再启动开发服务器。这意味着所有的模块都需要在开发前进行打包&#xff0c;这会增加启动时间和构建时间。 Vite&#xff1a;Vite 则是直接启动开发服务器…
阅读更多...
Java设计模式 —— 【行为型模式】中介者模式（Mediator Pattern）详解

Java设计模式 —— 【行为型模式】中介者模式（Mediator Pattern）详解

文章目录 概述结构优缺点及适用场景案例实现 概述 中介者模式又叫调停模式&#xff0c;是一种行为模式&#xff0c;它定义一个中介角色来封装一系列对象之间的交互&#xff0c;使原有对象之间的耦合松散&#xff0c;且可以独立地改变它们之间的交互。 中介者模式是迪米特原则的…
阅读更多...
最新文章

Copyright @ 2022~2023