Flutter开发：选择原生AppBar还是自定义AppBar更合适？

优先用原生AppBar的场景 #

• 你的自定义需求没完全跳出leading/title/actions的布局框架：比如只是改颜色、字体，或者给这三个区域换个内部组件——原生AppBar其实允许你在这三个属性里传入任意Widget，甚至可以把leading设为SizedBox.shrink()隐藏，title换成复杂的Row/Column布局，actions塞多个自定义按钮，大部分中等复杂度的需求都能覆盖。
• 需要保留原生内置特性：比如自适应不同屏幕宽度、滚动时的渐变/隐藏效果（配合SliverAppBar）、系统状态栏自动适配、返回按钮的默认行为（Android物理返回、iOS滑动返回）。这些特性自己用Container实现的话，要手动处理一堆细节，成本很高。

举个实际例子，做带搜索框的AppBar完全可以用原生：

AppBar(
  leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
  title: TextField(
    decoration: InputDecoration(hintText: "搜索内容"),
  ),
  actions: [
    IconButton(icon: Icon(Icons.share), onPressed: () {}),
  ],
  backgroundColor: Colors.orangeAccent,
)

适合用Container自定义的场景 #

• 你的布局彻底突破原生三栏结构：比如要把标题放左侧、按钮居中，或者要加贯穿整个AppBar的进度条这类跨区域组件，原生的布局约束会让你很难调整。
• 不需要原生的内置特性：比如页面不需要滚动联动、不需要系统状态栏适配，或者你想完全自己控制AppBar的尺寸、位置、动画逻辑。

自定义的简单示例：

Container(
  height: kToolbarHeight,
  color: Colors.blueGrey,
  padding: EdgeInsets.symmetric(horizontal: 16),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text("自定义标题", style: TextStyle(fontSize: 20, color: Colors.white)),
      Row(
        children: [
          IconButton(icon: Icon(Icons.settings, color: Colors.white), onPressed: () {}),
          IconButton(icon: Icon(Icons.more_vert, color: Colors.white), onPressed: () {}),
        ],
      ),
    ],
  ),
)

折中方案：用flexibleSpace扩展原生AppBar #

如果既想保留原生特性，又要突破三栏限制，可以用flexibleSpace属性——它会占据AppBar的整个空间，你可以在里面放任意布局：

AppBar(
  toolbarHeight: 60,
  flexibleSpace: Container(
    color: Colors.green,
    child: Center(
      child: Text("居中显示的标题", style: TextStyle(fontSize: 20, color: Colors.white)),
    ),
  ),
)

总结 #

能靠原生AppBar（灵活利用leading/title/actions/flexibleSpace）实现的，就别自己造轮子；只有当原生布局框架完全满足不了需求时，再用Container从头自定义。

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