Flutter中如何在ListView.builder内嵌套使用ListView

• Flutter中ListView默认会在滚动主轴方向占据最大可用高度，当它的父组件本身是无固定高度的滚动容器时，无法给到明确的高度约束，子ListView就会因为无法计算布局尺寸而无法渲染显示。
• 你已经为中间层的ListView.builder配置了shrinkWrap: true（让列表高度适配自身内容）和ClampingScrollPhysics（禁用独立滚动），但最内层的ListView缺失这两项配置，这是不显示的核心原因。

给最内层的ListView补充shrinkWrap: true和滚动禁用配置即可，考虑到嵌套列表的交互逻辑，内层列表无需独立滚动，用NeverScrollableScrollPhysics更合适，修改后的代码如下：

List<String> list1 = ["pppp", "qqqq", "rrrr"];
List<String> list2 = ["aaaa", "bbbb", "cccc"];

@override
Widget build(BuildContext ctxt) {
  return Scaffold(
    body: Column(
      children: <Widget>[
        Expanded(
          child: ListView.separated(
            itemCount: list1.length,
            itemBuilder: (BuildContext ctxt, int outerIndex) {
              return ListView.builder(
                shrinkWrap: true,
                physics: const ClampingScrollPhysics(),
                itemCount: list2.length,
                itemBuilder: (BuildContext ctxt, int innerIndex) {
                  return ListView(
                    padding: const EdgeInsets.all(8),
                    // 新增以下两行配置
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    children: <Widget>[
                      Text(
                        list2[innerIndex],
                        style: const TextStyle(
                          color: Colors.green,
                          fontSize: 25,
                        ),
                      ),
                      // 可在此处添加其他自定义Widget
                    ],
                  );
                },
              );
            },
            separatorBuilder: (context, build) => Divider(
              thickness: 1,
              color: const Color(0xff002540).withOpacity(.1),
            ),
          ),
        ),
      ],
    ),
  );
}

如果你最内层的容器不需要滚动能力，只是用来承载多个不同的Widget，完全可以用Column替代ListView，减少不必要的滚动组件开销，性能更好，替换代码如下：

itemBuilder: (BuildContext ctxt, int innerIndex) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Padding(
        padding: const EdgeInsets.all(8),
        child: Text(
          list2[innerIndex],
          style: const TextStyle(
            color: Colors.green,
            fontSize: 25,
          ),
        ),
      ),
      // 可直接添加其他自定义Widget
    ],
  );
}

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