如何使用Flutter AppBar实现目标样式的数据表格表头或标题

你想要的分段式标题导航效果无法通过单一Text组件作为AppBar标题实现，需要自定义AppBar的标题区域或使用内置TabBar组件，可参考如下两种实现方案：

方案1：使用AppBar + TabBar（推荐） #

适配原生滑动切换逻辑，自带点击切换交互：

// 首先需要让当前页面的State混入SingleTickerProviderStateMixin
late TabController _tabController;
final List<String> _tabs = ['待处理', '已处理', '已完成'];

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

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      // 保留左侧主标题可保留这行，不需要直接删掉即可
      title: const Text("工单管理"),
      bottom: TabBar(
        controller: _tabController,
        tabs: _tabs.map((tab) => Tab(text: tab)).toList(),
        indicatorColor: Colors.white, // 选中态下划线颜色
        labelColor: Colors.white, // 选中文字颜色
        unselectedLabelColor: Colors.white70, // 未选中文字颜色
      ),
    ),
    body: TabBarView(
      controller: _tabController,
      children: _tabs.map((tab) {
        return Center(child: Text("$tab页面内容"));
      }).toList(),
    ),
  );
}

方案2：完全自定义AppBar的title #

不需要滑动切换、要自定义点击逻辑可选择这个方案：

appBar: AppBar(
  title: Row(
    children: [
      const Text("工单管理"),
      const SizedBox(width: 20),
      // 选中态标签
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.2),
          borderRadius: BorderRadius.circular(20),
        ),
        child: const Text("待处理", style: TextStyle(color: Colors.white)),
      ),
      const SizedBox(width: 12),
      // 未选中态标签
      const Text("已处理", style: TextStyle(color: Colors.white70)),
      const SizedBox(width: 12),
      const Text("已完成", style: TextStyle(color: Colors.white70)),
    ],
  ),
)

你可以根据设计稿调整文字大小、间距、选中态样式即可匹配目标效果。

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