https://saucewu.github.io/tags/gesture/Recent content in Gesture on Website of SauceWuHugo -- gohugo.iozhFri, 10 Apr 2026 10:00:00 +0000https://saucewu.github.io/posts/flutter-%E6%89%8B%E5%8A%BF%E7%B3%BB%E7%BB%9F%E4%B8%8E%E7%AB%9E%E6%8A%80%E5%9C%BA%E6%9C%BA%E5%88%B6%E8%AF%A6%E8%A7%A3/Fri, 10 Apr 2026 10:00:00 +0000https://saucewu.github.io/posts/flutter-%E6%89%8B%E5%8A%BF%E7%B3%BB%E7%BB%9F%E4%B8%8E%E7%AB%9E%E6%8A%80%E5%9C%BA%E6%9C%BA%E5%88%B6%E8%AF%A6%E8%A7%A3/<h1 id="flutter-手势系统与竞技场机制详解">Flutter 手势系统与竞技场机制详解</h1> <h2 id="目录">目录</h2> <ul> <li>一、Gesture Arena（手势竞技场）运行原理</li> <li>二、与 Android 触摸分发机制的核心区别</li> <li>三、OneSequenceGestureRecognizer 生命周期详解</li> <li>四、MultiTapGestureRecognizer 使用场景与区别</li> <li>五、GestureArenaTeam 实际应用场景</li> <li>六、总结</li> </ul> <hr> <h1 id="一gesture-arena手势竞技场运行原理">一、Gesture Arena（手势竞技场）运行原理</h1> <h2 id="1-两层触摸模型">1. 两层触摸模型</h2> <p>Flutter 的触摸处理分为两层：</p> <table> <thead> <tr> <th>层级</th> <th>说明</th> <th>对应类</th> </tr> </thead> <tbody> <tr> <td>Pointer</td> <td>原始触摸事件（down / move / up）</td> <td><code>PointerEvent</code></td> </tr> <tr> <td>Gesture</td> <td>语义手势（tap、drag、scale 等）</td> <td><code>GestureRecognizer</code></td> </tr> </tbody> </table> <p>Pointer 层不做任何裁决，<strong>所有命中节点都会收到完整的 PointerEvent 序列</strong>。Gesture Arena 工作在 Gesture 层，负责在多个识别器之间做出唯一裁决。</p>https://saucewu.github.io/posts/flutter-k%E7%BA%BF%E7%B3%BB%E7%BB%9F%E6%8B%86%E8%A7%A3%E5%9B%9B%E4%BA%A4%E4%BA%92%E4%BD%93%E7%B3%BB%E4%B8%8E%E6%80%A7%E8%83%BD%E5%B7%A5%E7%A8%8B/Mon, 07 Apr 2025 13:15:00 +0900https://saucewu.github.io/posts/flutter-k%E7%BA%BF%E7%B3%BB%E7%BB%9F%E6%8B%86%E8%A7%A3%E5%9B%9B%E4%BA%A4%E4%BA%92%E4%BD%93%E7%B3%BB%E4%B8%8E%E6%80%A7%E8%83%BD%E5%B7%A5%E7%A8%8B/<h1 id="flutter-k线系统拆解四交互体系与性能工程">Flutter K线系统拆解（四）：交互体系与性能工程</h1> <h2 id="为什么交互比指标更容易暴露问题">为什么交互比指标更容易暴露问题</h2> <p>很多交易页在功能上都能“跑起来”，但只要用户开始频繁缩放、拖动、长按，体验差异会立刻被放大。<br> 体感里的“丝滑”和“卡顿”，通常不来自单一 bug，而是交互链路里多个小问题叠加：</p> <ul> <li>手势事件触发过密</li> <li>状态更新范围过大</li> <li>动画和计算抢同一帧预算</li> <li>非关键绘制在高频交互里持续执行</li> </ul> <p>所以这一篇的重点不是“某个技巧”，而是如何把交互链路做成一套稳定的工程系统。</p> <hr> <h2 id="一交互设计里的三个关键决定">一、交互设计里的三个关键决定</h2> <h3 id="1-方向锁定先判断用户意图再决定谁接管手势">1) 方向锁定：先判断用户意图，再决定谁接管手势</h3> <p>在图表可编辑、页面又可滚动的场景里，方向锁是刚需。<br> 当手势轨迹偏垂直时，把事件交给外层滚动容器；偏水平时再由图表处理，这能明显减少“手势打架”。</p> <p>方向锁不是锦上添花，而是复杂页面里“能不能用”的分水岭。</p> <h3 id="2-状态分离长按拖拽缩放不要混成一个开关">2) 状态分离：长按、拖拽、缩放不要混成一个开关</h3> <p>把 <code>isLongPress</code>、<code>isDrag</code>、<code>isScale</code> 独立维护，收益很直接：<br> 状态更可控、回归更容易、边界问题更少。<br> 尤其在十字线与拖拽共存时，状态分离可以显著降低互相干扰。</p> <h3 id="3-绘制隔离高频区域和低频区域分开">3) 绘制隔离：高频区域和低频区域分开</h3> <p>给图表主体加 <code>RepaintBoundary</code>，本质是在缩小重绘传播范围。<br> 在包含导航栏、侧边信息、浮层工具条的复杂页面里，这个动作通常会带来稳定的帧率收益。</p>