Flutter中如何在TabBarView的标签页内添加ListView列表

报错核心原因 #

TabBarView默认会为子控件提供无边界的纵向布局空间，而ListView默认会尝试占满所有可用高度，二者的约束冲突会直接触发布局异常。

适配方案 #

场景1：a标签页仅展示纯列表 #

直接替换TabBarView中第一个子项的Center组件为ListView即可：

body: const TabBarView(
  children: <Widget>[
    // 替换原Center部分
    ListView(
      children: [
        ListTile(title: Text("列表项1")),
        ListTile(title: Text("列表项2")),
        ListTile(title: Text("列表项3")),
        // 可继续添加更多列表项
      ],
    ),
    Center(
      child: Text("b"),
    ),
    Center(
      child: Text("c"),
    ),
  ],
)

场景2：a标签页搭配Column实现「固定顶部内容+列表」的布局 #

此时需要给Column内部的ListView套上Expanded，明确指定列表可占用的剩余高度，避免约束冲突：

body: TabBarView(
  children: <Widget>[
    // 替换原Center部分
    Column(
      children: [
        // 顶部固定内容，例如标题、筛选栏等
        const Padding(
          padding: EdgeInsets.all(16),
          child: Text("a标签页顶部标题"),
        ),
        // 列表部分必须包裹Expanded，撑满Column的剩余可用高度
        Expanded(
          child: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index) {
              return ListTile(title: Text("动态列表项$index"));
            },
          ),
        )
      ],
    ),
    Center(
      child: Text("b"),
    ),
    Center(
      child: Text("c"),
    ),
  ],
)

注意事项 #

• 如果使用动态生成列表的ListView.builder，需要移除对应TabBarView子项的const修饰符，因为动态组件无法被常量修饰。
• 如果是横向滚动的ListView，只需要给ListView指定明确的固定高度即可正常布局。

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