Flutter如何实现AppBar内TabBar位于actions操作图标左侧的效果

云上老周

2026-9-26

问题原因

你当前为leading属性设置了double.maxFinite宽度，导致leading区域直接占满了AppBar的全部横向空间，右侧的actions图标被完全挤出可视区域，因此无法正常展示。

解决方案

不要将TabBar放在leading属性中，改为放置在AppBar的title属性里，同时给TabBar添加isScrollable: true配置，让TabBar只占用自身内容所需的宽度，预留出右侧空间给actions图标。

调整后完整代码

Widget build(BuildContext context) {
  return DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        // 将TabBar放到title属性中
        title: TabBar(
          indicatorSize: TabBarIndicatorSize.tab,
          // 新增配置：TabBar不自动拉伸占满父容器
          isScrollable: true,
          tabs: const [
            Tab(text: "Pending"),
            Tab(text: "Delivered"),
          ],
        ),
        actions: const [
          IconButton(onPressed: null, icon: Icon(Icons.home)),
          IconButton(onPressed: null, icon: Icon(Icons.search)),
          IconButton(onPressed: null, icon: Icon(Icons.archive)),
        ],
      ),
      body: const TabBarView(
        children: [
          Center(child: Text("Pending")),
          Center(child: Text("Delivered")),
        ],
      ),
    ),
  );
}