Flutter：如何实现带图标文字的TabBar及可滚动页面？

问题出在你给整个body添加SingleChildScrollView的方式不对——TabBarView需要明确的高度约束才能渲染内容，外层套滚动组件会让它失去高度限制，导致内容消失。正确的做法是让TabBarView的子组件自身具备滚动能力，具体操作如下：

1. 修复listBerita组件，让它内部可滚动 #

如果你的listBerita是用Column实现的，把它包裹在SingleChildScrollView里；如果是列表项，直接用ListView更合适。示例代码：

方式一：用ListView实现可滚动列表 #

class listBerita extends StatelessWidget {
  const listBerita({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      // shrinkWrap: true 让ListView自适应内容高度，避免嵌套时的高度冲突
      shrinkWrap: true,
      children: [
        // 替换成你的实际列表项
        for (int i = 0; i < 20; i++)
          Card(
            margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
            child: ListTile(
              title: Text("Berita $i"),
              subtitle: Text("Detail berita ke-$i"),
            ),
          ),
      ],
    );
  }
}

方式二：用SingleChildScrollView包裹Column #

如果你的内容是自定义Column布局：

class listBerita extends StatelessWidget {
  const listBerita({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 20),
          Text("标题", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
          SizedBox(height: 10),
          // 替换成你的自定义内容
          for (int i = 0; i < 20; i++)
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text("列表项 $i"),
            ),
        ],
      ),
    );
  }
}

2. 简化Tab标签的写法（可选） #

你不需要手动用Row组合Icon和Text，Tab组件本身提供了icon和text属性，系统会自动处理图标与文字的布局，以及选中/未选中的样式：

TabBar(
  labelColor: Colors.blue,
  unselectedLabelColor: Colors.grey,
  tabs: const [
    Tab(icon: Icon(Icons.mail), text: "Inbox"),
    Tab(icon: Icons.inbox, text: "Disposisi"),
  ],
)

3. 保持原页面结构不变 #

无需修改TabBarView的外层结构，直接使用调整后的listBerita即可：

body: const TabBarView(
  children: [
    listBerita(),
    Icon(Icons.directions_transit),
  ],
)

这样修改后，listBerita里的内容就能正常滚动了。

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