Flutter构建含Container与ListView.builder的可滚动列及排错

问题描述 #

我需要实现一个视图：上方是带数据的Container，下方是列表，两者能一起滚动。我用SingleChildScrollView（physics: ScrollPhysics()）包裹Column，Column内放置固定高度的Container和设置了shrinkWrap: true、physics: NeverScrollableScrollPhysics()的ListView.builder，但出现以下异常：

FlutterError (RenderFlex children have non-zero flex but incoming height constraints are unbounded.
当Column处于无法提供有限高度约束的父组件中时（例如在垂直滚动组件内），它会尝试沿垂直方向收缩包裹其子组件。为子组件设置flex（例如使用Expanded）表示该子组件要扩展以填充垂直方向的剩余空间。

尝试用Expanded包裹Builder后，仍出现相同错误。

原代码 #

import 'package:Healthwise/helpers/dataVariables.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:get/get_navigation/get_navigation.dart';
import '../helpers/backEnd.dart';
import '../helpers/frontEnd.dart';

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

  @override
  State<ResultPage> createState() => _ResultPageState();
}

class _ResultPageState extends State<ResultPage> {
  String objectToString = '';
  var dataAsString = <String>[];

  @override
  void initState() {
    super.initState();
    getUserById();
  }

  getUserById() {
    String id = itemName.toLowerCase().trim();

    fruitInfoDoc.doc(id).get().then((DocumentSnapshot doc) {
      objectToString = doc.data().toString();
      String temp = '';
      int i = 1;
      bool end = false;

      while (objectToString[i] != '}') {
        if (objectToString[i - 1] == ' ' && objectToString[i - 2] == ':') {
          while (objectToString[i] != ',' && end != true) {
            temp += objectToString[i];
            if (objectToString[i + 1] != '}') {
              i++;
            } else {
              end = true;
            }
          }
          dataAsString.add(temp);
          temp = '';
        }
        i++;
      }

      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        Navigator.pop(context);
        return false;
      },
      child: Scaffold(
        appBar: AppBar(
            automaticallyImplyLeading: false,
            backgroundColor: primary_color,
            title: Center(
              child: Text(
                itemName.trim().toUpperCase(),
                style: TextStyle(
                    color: Color.fromARGB(255, 255, 255, 255),
                    fontSize: 15),
              ),
            )),
        body: SingleChildScrollView(
          physics: ScrollPhysics(),
          child: Column(
            children: [
              Container(
                color: Color.fromARGB(255, 150, 50, 50),
                height: 200,
                width: 100,
              ),
              Expanded(
                child: Expanded(
                  child: Builder(
                    builder: (context) {
                      if (dataAsString.length > 0) {
                        return ListView.builder(
                            shrinkWrap: true,
                            physics: NeverScrollableScrollPhysics(),
                            itemCount: dataAsString.length,
                            itemBuilder: (BuildContext context, int index) {
                              return EditedListTile(
                                dataAsString: dataAsString,
                                index: index,
                              );
                            });
                      } else {
                        return const Center(
                          child: CircularProgressIndicator(),
                        );
                      }
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解决方案 #

错误原因 #

SingleChildScrollView会给子组件提供无限高度的约束，而Column中的Expanded要求父组件提供有限高度来分配剩余空间，两者逻辑冲突。另外你嵌套了多层Expanded，属于冗余操作，进一步加剧了约束矛盾。

修正步骤 #

直接移除所有Expanded：你的ListView.builder已经设置了shrinkWrap: true，它会自动根据子项高度收缩自身，不需要Expanded强制扩展。此时Column的子组件（上方固定高度的Container+下方自适应的ListView）都有明确的高度约束，SingleChildScrollView就能正常包裹整个布局实现一起滚动。

修改后的代码（核心部分） #

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      Navigator.pop(context);
      return false;
    },
    child: Scaffold(
      appBar: AppBar(
          automaticallyImplyLeading: false,
          backgroundColor: primary_color,
          title: Center(
            child: Text(
              itemName.trim().toUpperCase(),
              style: TextStyle(
                  color: Color.fromARGB(255, 255, 255, 255),
                  fontSize: 15),
            ),
          )),
      body: SingleChildScrollView(
        physics: ScrollPhysics(),
        child: Column(
          children: [
            Container(
              color: Color.fromARGB(255, 150, 50, 50),
              height: 200,
              width: 100,
            ),
            // 移除所有Expanded，直接使用Builder
            Builder(
              builder: (context) {
                if (dataAsString.length > 0) {
                  return ListView.builder(
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: dataAsString.length,
                      itemBuilder: (BuildContext context, int index) {
                        return EditedListTile(
                          dataAsString: dataAsString,
                          index: index,
                        );
                      });
                } else {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ],
        ),
      ),
    ),
  );
}

额外优化建议 #

你解析Firestore文档的方式过于繁琐，建议直接将文档数据转为Map来提取值，避免手动遍历字符串的潜在错误：

getUserById() {
  String id = itemName.toLowerCase().trim();

  fruitInfoDoc.doc(id).get().then((DocumentSnapshot doc) {
    Map<String, dynamic> data = doc.data() as Map<String, dynamic>;
    // 直接提取所有值转为字符串列表
    dataAsString = data.values.map((value) => value.toString()).toList();
    setState(() {});
  });
}

内容的提问来源于stack exchange，提问作者Abhishek Tiwari