如何使用List.generate方法创建GlobalKey列表并解决栈溢出问题？

栈溢出原因 #

你的List.generate初始化逻辑触发了递归调用：
全局变量keyCap是懒加载的，首次访问时才会执行初始化逻辑。而你在List.generate的生成回调中，直接对还未完成初始化的keyCap进行下标赋值操作keyCap[index] = GlobalKey()，这个操作会再次触发keyCap的初始化逻辑，形成无限循环，最终导致栈溢出。

List.generate会自动把回调返回的值填充到列表的对应下标，不需要手动赋值。

修复代码 #

简化修复（全局存储写法） #

直接修改keyCap的初始化逻辑即可：

List<GlobalKey> keyCap = List<GlobalKey>.generate(12, (int index) => GlobalKey());

更推荐的实现 #

全局存储GlobalKey容易在页面多次重建时出现状态残留问题，建议将GlobalKey列表放到对应页面的State中管理，和页面生命周期绑定：

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late List<GlobalKey> keyCap;

  @override
  void initState() {
    super.initState();
    keyCap = List<GlobalKey>.generate(12, (index) => GlobalKey());
    // 渲染完成后获取坐标示例
    WidgetsBinding.instance.addPostFrameCallback((_) {
      RenderBox? renderBox = keyCap[0].currentContext?.findRenderObject() as RenderBox?;
      if (renderBox != null) {
        // 组件左上角相对屏幕的坐标
        Offset widgetPosition = renderBox.localToGlobal(Offset.zero);
        // 组件宽高尺寸
        Size widgetSize = renderBox.size;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          key: keyCap[0],
          color: Colors.red,
        ));
  }
}

内容的提问来源于stack exchange，提问作者Sam spud