Flutter中Column底部溢出RenderFlex错误解决方案咨询

我尝试用Column堆叠两个ListView.builder，代码如下：

@override
Widget build(BuildContext context) {
  return widget.category == 0
      ? Column(
          children: [
            buildList("12-15", Utils.srsDropdown, "Single rope speed: "),
            buildList("12-15", Utils.ddsDropdown, "Double dutch speed: ")
          ],
        )
      : Column(
          children: [
            buildList("16+", Utils.srsDropdown, "Single rope speed: "),
            buildList("16+", Utils.ddsDropdown, "Double dutch speed: ")
          ],
        );
}

buildList函数实现：

Widget buildList(String ageGroup, List<String> categories, String category) {
  return ListView.builder(
      shrinkWrap: true,
      itemCount: categories.length - 1,
      itemBuilder: (BuildContext context, int index) {
        return Column(
          children: [
            Text('$category${categories[index]}'),
            FutureBuilder<List<Map<String, dynamic>>>(
                future: LeadersCard.getData(ageGroup, categories, category)!,
                builder: ((context, snapshot) {
                  return LeadersCard.buildCard(snapshot, context, index);
                }))
          ],
        );
      });
}

LeadersCard.buildCard返回的组件：

return Column(
  children: [
    ListTile(
        title: Text(
            "Record: ${card.data![index]['firstPlaceScore'].toString()}"),
        subtitle: Text("Held by: $first"),
        shape: const Border(bottom: BorderSide())),
    ListTile(
        title: Text(
            "Record: ${card.data![index]['secondPlaceScore'].toString()}"),
        subtitle: Text("Held by: $second"),
        shape: const Border(bottom: BorderSide())),
    ListTile(
        title: Text(
            "Record: ${card.data![index]['thirdPlaceScore'].toString()}"),
        subtitle: Text("Held by: $third"),
        shape: const Border(bottom: BorderSide()))
  ],
);

现在出现了底部溢出的问题，想知道用什么替代Column来堆叠这些列表和ListTile。

方法1：用SingleChildScrollView包裹Column #

给外层Column套个SingleChildScrollView，同时给内部ListView.builder加上physics: NeverScrollableScrollPhysics()避免嵌套滚动冲突，保留shrinkWrap: true让列表自适应高度。

修改后的build方法：

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Column(
      children: widget.category == 0
          ? [
              buildList("12-15", Utils.srsDropdown, "Single rope speed: "),
              buildList("12-15", Utils.ddsDropdown, "Double dutch speed: ")
            ]
          : [
              buildList("16+", Utils.srsDropdown, "Single rope speed: "),
              buildList("16+", Utils.ddsDropdown, "Double dutch speed: ")
            ],
    ),
  );
}

更新buildList里的ListView配置：

Widget buildList(String ageGroup, List<String> categories, String category) {
  return ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: categories.length - 1,
      itemBuilder: (BuildContext context, int index) {
        // 原有代码不变
      });
}

方法2：用CustomScrollView合并成统一滚动列表 #

如果想让整个页面保持流畅的滚动体验，把两个列表转换成Sliver组件，用CustomScrollView包裹。

先把buildList改成返回SliverList：

Widget buildList(String ageGroup, List<String> categories, String category) {
  return SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, index) {
        return Column(
          children: [
            Text('$category${categories[index]}'),
            FutureBuilder<List<Map<String, dynamic>>>(
                future: LeadersCard.getData(ageGroup, categories, category)!,
                builder: ((context, snapshot) {
                  return LeadersCard.buildCard(snapshot, context, index);
                }))
          ],
        );
      },
      childCount: categories.length - 1,
    ),
  );
}

外层替换为CustomScrollView：

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: widget.category == 0
        ? [
            buildList("12-15", Utils.srsDropdown, "Single rope speed: "),
            buildList("12-15", Utils.ddsDropdown, "Double dutch speed: ")
          ]
        : [
            buildList("16+", Utils.srsDropdown, "Single rope speed: "),
            buildList("16+", Utils.ddsDropdown, "Double dutch speed: ")
          ],
  );
}

方法3：给每个ListView套Expanded（固定比例分配空间） #

如果希望两个列表平分屏幕空间、各自独立滚动，给Column里的每个buildList组件套Expanded，同时去掉shrinkWrap: true。

修改后的build方法：

@override
Widget build(BuildContext context) {
  return Column(
    children: widget.category == 0
        ? [
            Expanded(child: buildList("12-15", Utils.srsDropdown, "Single rope speed: ")),
            Expanded(child: buildList("12-15", Utils.ddsDropdown, "Double dutch speed: "))
          ]
        : [
            Expanded(child: buildList("16+", Utils.srsDropdown, "Single rope speed: ")),
            Expanded(child: buildList("16+", Utils.ddsDropdown, "Double dutch speed: "))
          ],
  );
}

更新buildList：

Widget buildList(String ageGroup, List<String> categories, String category) {
  return ListView.builder(
      // 去掉shrinkWrap: true
      itemCount: categories.length - 1,
      itemBuilder: (BuildContext context, int index) {
        // 原有代码不变
      });
}

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