Flutter嵌套Stream引发RenderIndexedSemantics无限布局错误求助

我之前见过有人问过类似问题，但那些解决方案对我都不管用。我在Flutter里嵌套了两个Stream，每次运行代码都会报错：RenderIndexedSemantics object was given an infinite size during layout.。我觉得这是布局问题，试过用SizedBox、Expanded组件，但又出现了其他错误。

原代码 #

Green组件 #

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

  @override
  State<Green> createState() => _GreenState();
}

class _GreenState extends State<Green> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
        stream: FirebaseFirestore.instance.collection("gates").snapshots(),
        builder: (_, snapshot) {
          if (snapshot.hasError) return Text('Error = ${snapshot.error}');
        
          if (snapshot.hasData) {
            final docs = snapshot.data!.docs;
            return ListView.builder(
              itemCount: docs.length,
              itemBuilder: (_, i) {
                final data = docs[i].data();
                return Second(g: data["gname"]);
              },
            );
          }
        
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  } 
}

Second组件 #

class Second extends StatefulWidget {
  String? g;

  Second({Key? key, required widget.g}) : super(key: key);

  @override
  State<Second> createState() => _SecondState();
}

class _SecondState extends State<Second> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 600,
        child: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
          stream: FirebaseFirestore.instance
              .collection(uid)
              .where("gatename", isEqualTo: widget.g)
              .snapshots(),
          builder: (_, snapshot2) {
            if (snapshot2.hasData) {
              if (snapshot2.data?.size == 0) {
                return const Center(child: Text('No Data'));
              } else {
                final ds = snapshot2.data!.docs;
                return Padding(
                  padding: const EdgeInsets.all(38.0),
                  child: ListView.builder(
                    itemCount: ds.length,
                    itemBuilder: (_, i) {
                      final d = ds[i].data();
                      return ListTile(
                        title: Text(d["time"].toString()),
                        leading: Text(d["gatename"].toString()),
                      );
                    },
                  ),
                );
              }
            }
            return const Center(child: CircularProgressIndicator());
          },
        ),
      ),
    );
  }
}

错误原因及修复方案 #

核心问题 #

1. 嵌套Scaffold导致布局混乱：Second组件作为父ListView的子项，却返回了完整的Scaffold页面结构，破坏了父级ListView的布局约束。
2. 嵌套ListView的无限高度冲突：父级是可滚动的ListView，子级Second里又嵌套了ListView.builder，未限制子ListView的尺寸，导致布局时无法确定其高度，触发无限尺寸错误。
3. 构造函数语法错误：Second组件的构造参数写法不符合Dart规范，required widget.g是错误写法。

修复后的代码 #

修正后的Second组件

class Second extends StatefulWidget {
  final String g; // 改为不可空final变量，匹配required参数要求

  const Second({Key? key, required this.g}) : super(key: key); // 修正构造参数写法

  @override
  State<Second> createState() => _SecondState();
}

class _SecondState extends State<Second> {
  @override
  Widget build(BuildContext context) {
    // 去掉Scaffold，作为父ListView的子项无需独立页面结构
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      child: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
        stream: FirebaseFirestore.instance
            .collection(uid)
            .where("gatename", isEqualTo: widget.g)
            .snapshots(),
        builder: (_, snapshot2) {
          if (snapshot2.hasError) {
            return Text('Error: ${snapshot2.error}');
          }
          
          if (snapshot2.hasData) {
            if (snapshot2.data?.size == 0) {
              return const Center(child: Text('No Data'));
            } else {
              final ds = snapshot2.data!.docs;
              // 用shrinkWrap让ListView自适应内容高度，禁止滚动避免嵌套冲突
              return ListView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: ds.length,
                itemBuilder: (_, i) {
                  final d = ds[i].data();
                  return ListTile(
                    title: Text(d["time"].toString()),
                    leading: Text(d["gatename"].toString()),
                  );
                },
              );
            }
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

Green组件（无需修改，可按需加样式优化）

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

  @override
  State<Green> createState() => _GreenState();
}

class _GreenState extends State<Green> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
        stream: FirebaseFirestore.instance.collection("gates").snapshots(),
        builder: (_, snapshot) {
          if (snapshot.hasError) return Text('Error = ${snapshot.error}');
        
          if (snapshot.hasData) {
            final docs = snapshot.data!.docs;
            return ListView.builder(
              itemCount: docs.length,
              itemBuilder: (_, i) {
                final data = docs[i].data();
                return Second(g: data["gname"]);
              },
            );
          }
        
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  } 
}

关键修复说明 #

• shrinkWrap: true：让子ListView根据内容自动计算高度，不再占用无限空间。
• physics: NeverScrollableScrollPhysics()：禁止子ListView滚动，避免与父级ListView的滚动行为冲突。
• 移除Second内的Scaffold：子项仅作为列表内容存在，不需要独立页面框架，确保布局约束正常传递。

内容的提问来源于stack exchange，提问作者AsiF SHaik