Flutter如何实现AppBar下方导航式选项切换功能？

1. 使用TabBar + TabBarView（官方标准导航切换方案） #

这是Flutter原生支持的顶部导航切换组件，完全匹配你的需求，自带选中态样式，无需手动维护按钮状态，联动下方内容区域也更简洁。

示例代码：

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

  @override
  State<LocationPage> createState() => _LocationPageState();
}

class _LocationPageState extends State<LocationPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('页面标题'),
        // 将TabBar放在AppBar的bottom属性中，自动对齐到AppBar下方
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(text: 'location 1'),
            Tab(text: 'location 2'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          // location1对应的内容
          Center(child: Text('Location 1 内容区域')),
          // location2对应的内容
          Center(child: Text('Location 2 内容区域')),
        ],
      ),
    );
  }
}

该方案优势：

• 自动维护选中状态，自带下划线、文字变色等默认样式，也可通过labelStyle、unselectedLabelStyle、indicator自定义样式
• TabController自动联动TabBar和TabBarView，无需手动处理点击切换逻辑
• 支持滑动切换内容区域（可通过physics属性关闭）

2. 使用CupertinoSegmentedControl（iOS风格分段控件） #

如果需要iOS风格的切换按钮，可使用这个组件，直接放在AppBar下方即可：

示例代码：

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

  @override
  State<LocationPage> createState() => _LocationPageState();
}

class _LocationPageState extends State<LocationPage> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('页面标题')),
      body: Column(
        children: [
          // 放在AppBar下方的分段控件
          CupertinoSegmentedControl(
            groupValue: _selectedIndex,
            onValueChanged: (value) {
              setState(() {
                _selectedIndex = value as int;
              });
            },
            children: const {
              0: Text('location 1'),
              1: Text('location 2'),
            },
          ),
          // 内容区域
          Expanded(
            child: _selectedIndex == 0 
                ? const Center(child: Text('Location 1 内容')) 
                : const Center(child: Text('Location 2 内容')),
          ),
        ],
      ),
    );
  }
}

对比手动Row+TextButton的优势 #

• 上述组件都自带选中态视觉反馈，无需手动编写样式逻辑
• 官方组件经过多端适配，兼容性更好
• TabBar方案的联动逻辑更简洁，无需手动维护内容切换状态

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