如何用Flutter实现类似superlist.com的滑动分屏交互效果

核心思路 #

通过手势监听+动态布局计算实现，核心是用GestureDetector捕获拖动事件，实时更新两个面板的尺寸占比，再通过AnimatedContainer配合Row/Column实现平滑过渡效果。

具体实现步骤 #

1. 定义状态变量 #

先声明保存分屏比例、手势起始位置的状态：

double _splitRatio = 0.5; // 默认左右各占50%
Offset? _dragStartOffset;

2. 实现拖动交互逻辑 #

用GestureDetector包裹分隔条，处理拖动的开始、更新、结束事件：

Widget _buildDragHandle() {
  return GestureDetector(
    onPanStart: (details) => _dragStartOffset = details.globalPosition,
    onPanUpdate: (details) {
      if (_dragStartOffset == null) return;
      // 计算拖动偏移量，转换为屏幕宽度的比例变化
      double delta = details.globalPosition.dx - _dragStartOffset!.dx;
      double newRatio = _splitRatio + (delta / MediaQuery.of(context).size.width);
      // 限制比例范围，避免面板完全消失
      _splitRatio = newRatio.clamp(0.2, 0.8);
      _dragStartOffset = details.globalPosition;
      setState(() {});
    },
    onPanEnd: (details) => _dragStartOffset = null,
    child: Container(
      width: 8,
      color: Colors.grey[300],
      alignment: Alignment.center,
      child: const Icon(Icons.drag_indicator, size: 20),
    ),
  );
}

3. 构建分屏布局 #

用Row（横向分屏）或Column（纵向分屏）承载两个面板，根据_splitRatio动态调整尺寸：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Row(
      children: [
        // 左侧面板
        AnimatedContainer(
          duration: const Duration(milliseconds: 100),
          width: MediaQuery.of(context).size.width * _splitRatio,
          child: const LeftPanel(), // 替换为你的左侧面板组件
        ),
        // 拖动分隔条
        _buildDragHandle(),
        // 右侧面板
        const Expanded(
          child: RightPanel(), // 替换为你的右侧面板组件
        ),
      ],
    ),
  );
}

4. 进阶优化 #

• 惯性滑动：在onPanEnd中根据拖动速度计算目标比例，实现松手后的平滑过渡：

onPanEnd: (details) {
  _dragStartOffset = null;
  double velocity = details.velocity.pixelsPerSecond.dx;
  double targetRatio = _splitRatio + (velocity / MediaQuery.of(context).size.width * 0.1);
  targetRatio = targetRatio.clamp(0.2, 0.8);
  setState(() => _splitRatio = targetRatio);
},

• 边缘吸附：当比例接近0.5时自动吸附到平分状态，提升交互体验：

// 在onPanUpdate的setState前添加
if (_splitRatio > 0.45 && _splitRatio < 0.55) {
  _splitRatio = 0.5;
}

• 响应式适配：用LayoutBuilder获取父容器尺寸，避免依赖屏幕宽度，适配嵌套布局场景。

复杂场景替代方案 #

如果需要多面板、嵌套分屏等复杂逻辑，可以基于CustomMultiChildLayout自定义布局规则，直接控制每个子组件的位置与大小，灵活性更高。

内容的提问来源于stack exchange，提问作者Jonas Jacob Biermann