如何在Flutter Flame中创建scrollView 实现游戏可用的ListView功能

Flame本身没有内置的滚动组件，你可以通过以下两种方案快速实现，可根据你的业务场景选择：

方案1：Flutter原生列表混合实现（推荐，开发成本最低） #

Flame的GameWidget本身是标准的Flutter组件，你可以直接用Flutter原生的ListView和GameWidget做组合，复用Flutter成熟的滚动能力，无需自己处理手势、惯性滚动、边界回弹等复杂逻辑，适合游戏UI层的滚动列表需求。
示例代码如下：

Stack(
  fit: StackFit.expand,
  children: [
    // 你的游戏主画布
    GameWidget(game: MyGame()),
    // 固定位置的滚动列表
    Positioned(
      top: 60,
      left: 16,
      right: 16,
      height: 400,
      child: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              // 点击列表项和游戏交互，直接调用game实例方法即可
              // (context.findAncestorWidgetOfExactType<GameWidget>()?.game as MyGame).onItemTap(index);
            },
            child: Container(
              height: 54,
              margin: const EdgeInsets.only(bottom: 10),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.9),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Center(child: Text('列表项 $index')),
            ),
          );
        },
      ),
    )
  ],
)

方案2：纯Flame侧自定义滚动列表 #

如果你的滚动列表需要放在游戏世界内（比如随相机移动、和游戏内其他组件做碰撞交互），可以自定义滚动组件，核心逻辑是用裁剪组件限制可视区域，监听拖动手势更新子项偏移。
基础实现示例：

import 'package:flame/components.dart';
import 'package:flame/input.dart';

class FlameScrollList extends PositionComponent with HasGameRef {
  // 单个列表项高度
  final double itemHeight;
  // 列表所有子项
  final List<PositionComponent> items;
  // 滚动偏移量
  double _scrollOffset = 0.0;
  // 最大可滚动距离
  late final double _maxScrollOffset;

  FlameScrollList({
    required super.size,
    required super.position,
    required this.itemHeight,
    required this.items,
  }) {
    _maxScrollOffset = (items.length * itemHeight) - size.height;
    // 添加裁剪组件，只显示可视区域内的内容
    add(ClipComponent.rectangle(size: size)..addAll(items));
    _updateItemsPosition();
  }

  @override
  void onMount() {
    super.onMount();
    // 绑定垂直拖动手势
    add(VerticalDragGestureDetector(
      onVerticalDragUpdate: (dragInfo) {
        // 拖动时更新滚动偏移
        _scrollOffset -= dragInfo.delta.y;
        // 限制滚动边界，避免滚动超出范围
        _scrollOffset = _scrollOffset.clamp(0, _maxScrollOffset > 0 ? _maxScrollOffset : 0);
        _updateItemsPosition();
      },
    ));
  }

  // 更新所有子项的位置
  void _updateItemsPosition() {
    for (int i = 0; i < items.length; i++) {
      items[i].position.y = i * itemHeight - _scrollOffset;
    }
  }
}

你可以基于这个基础版本扩展惯性滚动、滚动指示器、选中态等自定义能力。

内容的提问来源于stack exchange，提问作者Seyyid Tiryaki