Flutter如何实现双行AppBar？附指定样式参考

针对你需要的双行AppBar样式，这里提供两种简单可行的实现方案：

方案1：利用AppBar的bottom属性（快速实现） #

这是最直接的方式，通过给AppBar添加bottom属性来实现双行结构，适合基础的双行需求：

AppBar(
  title: const Text('订单详情'),
  leading: IconButton(
    icon: const Icon(Icons.arrow_back_ios),
    onPressed: () => Navigator.pop(context),
  ),
  actions: [
    IconButton(
      icon: const Icon(Icons.share),
      onPressed: () {},
    ),
    IconButton(
      icon: const Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
  // 双行核心：添加底部行
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(48),
    child: Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(horizontal: 16),
      alignment: Alignment.centerLeft,
      color: Theme.of(context).primaryColor,
      child: const Text(
        '已完成 • 2024-05-20',
        style: TextStyle(fontSize: 14, color: Colors.white70),
      ),
    ),
  ),
)

方案2：自定义PreferredSizeWidget（高度定制） #

如果需要更复杂的双行布局（比如第二行也包含左右操作元素），可以自定义一个符合需求的AppBar组件：

class DoubleRowAppBar extends StatelessWidget implements PreferredSizeWidget {
  const DoubleRowAppBar({super.key});

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight + 48);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 第一行：标准工具栏
        SizedBox(
          height: kToolbarHeight,
          child: AppBar(
            elevation: 0,
            title: const Text('订单详情'),
            leading: IconButton(
              icon: const Icon(Icons.arrow_back_ios),
              onPressed: () => Navigator.pop(context),
            ),
            actions: [
              IconButton(icon: const Icon(Icons.share), onPressed: () {}),
              IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
            ],
          ),
        ),
        // 第二行：自定义内容
        Container(
          height: 48,
          color: Theme.of(context).primaryColor,
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                '已完成 • 2024-05-20',
                style: TextStyle(fontSize: 14, color: Colors.white70),
              ),
              TextButton(
                onPressed: () {},
                child: const Text('查看物流', style: TextStyle(color: Colors.white)),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

// 使用示例
Scaffold(
  appBar: const DoubleRowAppBar(),
  body: const Center(child: Text('页面内容区域')),
)

注意事项 #

• 如果需要实现Tab切换功能，直接将方案1中的bottom容器替换为TabBar即可，配合TabBarView使用。
• 自定义组件时，务必正确设置preferredSize，避免布局偏移问题。
• 可根据目标样式调整颜色、字体、间距等参数，完全匹配需求。

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