Flutter新手求教：如何在AppBar图标间实现导航？

嘿，作为Flutter新手，想要在AppBar的图标之间实现页面切换其实挺容易上手的，我给你分享几个项目里常用的方案，你可以根据自己的需求选：

如果你的导航是类似首页、搜索、个人中心这种固定的标签页，用TabBar是最省心的——它自带选中高亮、滑动切换的特性，完全不用自己处理状态逻辑。

实现步骤很简单：

1. 给页面添加SingleTickerProviderStateMixin（用来提供动画控制器）
2. 初始化TabController，指定标签数量
3. 在AppBar的bottom属性里放TabBar，绑定控制器
4. 页面body用TabBarView，同样绑定控制器，放入对应页面

代码示例：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 这里的3是标签数量，根据你的页面数调整
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    // 记得销毁控制器，避免内存泄漏
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar标签导航'),
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(icon: Icon(Icons.home)),
            Tab(icon: Icon(Icons.search)),
            Tab(icon: Icon(Icons.person)),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          Center(child: Text('首页内容')),
          Center(child: Text('搜索页内容')),
          Center(child: Text('个人中心内容')),
        ],
      ),
    );
  }
}

如果不想用TabBar的样式，想要完全自定义AppBar里的图标（比如调整位置、大小、高亮样式），那可以用IconButton结合IndexedStack来实现——这种方式更灵活，适合非标准的导航场景。

核心思路是：

• 用一个变量记录当前选中的页面索引
• AppBar的actions里放多个IconButton，点击时更新索引
• body用IndexedStack，根据索引切换显示的页面（还能自动保持页面状态）

代码示例：

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentPageIndex = 0;
  // 提前定义好所有要切换的页面
  final List<Widget> _pages = const [
    HomeContent(),
    MessageContent(),
    SettingsContent(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自定义图标导航'),
        actions: [
          // 首页图标
          IconButton(
            icon: Icon(
              Icons.home,
              // 给选中的图标加个高亮色，用户一眼就能看到当前在哪
              color: _currentPageIndex == 0 ? Colors.amber : null,
            ),
            onPressed: () => setState(() => _currentPageIndex = 0),
          ),
          // 消息图标
          IconButton(
            icon: Icon(
              Icons.notifications,
              color: _currentPageIndex == 1 ? Colors.amber : null,
            ),
            onPressed: () => setState(() => _currentPageIndex = 1),
          ),
          // 设置图标
          IconButton(
            icon: Icon(
              Icons.settings,
              color: _currentPageIndex == 2 ? Colors.amber : null,
            ),
            onPressed: () => setState(() => _currentPageIndex = 2),
          ),
        ],
      ),
      // IndexedStack会缓存所有页面，切换时不会重新初始化，完美保持状态
      body: IndexedStack(
        index: _currentPageIndex,
        children: _pages,
      ),
    );
  }
}

// 示例页面（如果需要保持状态，记得混入AutomaticKeepAliveClientMixin）
class HomeContent extends StatefulWidget {
  const HomeContent({super.key});

  @override
  State<HomeContent> createState() => _HomeContentState();
}

class _HomeContentState extends State<HomeContent> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用这个方法
    return const Center(child: Text('首页，切换回来不会重新加载'));
  }
}

// 其他页面同理...
class MessageContent extends StatelessWidget {
  const MessageContent({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('消息页'));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('设置页'));
  }
}

如果你切换页面时不想让页面重新初始化（比如首页有个列表，切换回来不想重新请求数据），一定要让对应的页面State混入AutomaticKeepAliveClientMixin，并把wantKeepAlive设为true，就像上面的HomeContent那样。

选哪个方案取决于你的需求：

• 追求简洁、标准的标签导航 → 用方案1
• 想要完全自定义图标样式、位置 → 用方案2

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