Flutter中如何在AppBar的搜索栏上方放置文本？

核心思路 #

不要直接在AppBar的title里嵌套复杂布局，而是利用AppBar的flexibleSpace属性承载顶部Row，同时将搜索栏放在bottom的PreferredSizeWidget中，避免层级覆盖或布局错乱问题。

实现代码示例 #

AppBar(
  backgroundColor: Colors.white,
  elevation: 0,
  flexibleSpace: Padding(
    padding: const EdgeInsets.fromLTRB(16, 40, 16, 8), // top值适配状态栏高度，也可通过MediaQuery动态获取
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Icon(Icons.arrow_back),
        Text("页面标题"),
        Icon(Icons.more_vert),
      ],
    ),
  ),
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(56),
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: TextField(
        decoration: InputDecoration(
          hintText: "搜索...",
          filled: true,
          fillColor: Colors.grey[200],
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide.none,
          ),
          prefixIcon: Icon(Icons.search),
        ),
      ),
    ),
  ),
  toolbarHeight: 120, // 整体调整AppBar高度，容纳flexibleSpace和bottom内容
)

关键说明 #

• 使用flexibleSpace放置顶部Row：该区域会自动在AppBar顶部渲染，不会与title或bottom内容冲突
• 用bottom属性承载搜索栏：通过PreferredSizeWidget自定义高度，确保搜索栏占据合适空间
• 调整toolbarHeight：需根据flexibleSpace和bottom的总高度设置，避免内容被截断
• 状态栏适配：flexibleSpace的padding top值可通过MediaQuery.of(context).padding.top动态获取，适配不同设备

替代方案（title内嵌套实现） #

如果一定要在title里嵌套，需确保Column顺序为Row在前、搜索栏在后，同时设置mainAxisSize: MainAxisSize.min并给AppBar足够高度：

AppBar(
  backgroundColor: Colors.white,
  elevation: 0,
  toolbarHeight: 120,
  title: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Icon(Icons.arrow_back),
          Text("页面标题"),
          Icon(Icons.more_vert),
        ],
      ),
      SizedBox(height: 8),
      TextField(
        decoration: InputDecoration(
          hintText: "搜索...",
          filled: true,
          fillColor: Colors.grey[200],
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide.none,
          ),
          prefixIcon: Icon(Icons.search),
        ),
      ),
    ],
  ),
)

之前Column方案失效原因 #

• 未设置toolbarHeight，AppBar高度不足导致Row被挤压到搜索栏后方
• 未设置mainAxisSize: MainAxisSize.min，Column默认占据最大高度，引发布局错乱

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