Flutter中如何在滚动时固定SliverAppBar内的TextField？

我来帮你搞定这个问题！你之前把搜索TextField放在flexibleSpace里，这个区域是SliverAppBar的可折叠扩展部分，滚动时会随着AppBar收缩被隐藏。要让搜索框始终固定显示，我们需要调整它的位置——把它移到SliverAppBar的bottom属性中，搭配pinned: true就能实现需求。

修改后的代码示例 #

SliverAppBar(
  stretch: true,
  title: Text('Home'),
  centerTitle: true,
  expandedHeight: 100.0,
  backgroundColor: Colors.red,
  leading: IconButton(
    icon: Icon(Icons.menu, color: Colors.white),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.notifications, color: Colors.white),
      onPressed: () {},
    ),
  ],
  pinned: true,
  // 将搜索框移至bottom属性，固定显示
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(56.0), // 定义搜索栏的高度，确保AppBar尺寸计算正确
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
      child: Container(
        height: 40,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(5.0),
        ),
        child: TextField(
          decoration: InputDecoration(
            labelText: "Search products...",
            border: InputBorder.none,
            icon: IconButton(onPressed: () {}, icon: Icon(Icons.search)),
          ),
        ),
      ),
    ),
  ),
  // 若需要扩展区域的背景或其他内容，保留flexibleSpace（可简化）
  flexibleSpace: FlexibleSpaceBar(
    background: Container(color: Colors.red),
  ),
);

关键逻辑说明 #

• bottom属性接收PreferredSizeWidget，用PreferredSize指定高度可以让AppBar正确计算自身整体尺寸，避免布局错乱。
• 当pinned: true时，SliverAppBar的底部区域会固定在屏幕顶部，不会随滚动收缩隐藏，刚好满足搜索框始终可见的需求。

SliverAppBar & SliverGrid 学习资源推荐 #

1. Flutter官方API文档
   • SliverAppBar文档：详细拆解pinned/floating/snap等核心属性的区别，以及各类场景下的配置方式。
   • SliverGrid文档：讲解两种常用布局代理（SliverGridDelegateWithFixedCrossAxisCount/SliverGridDelegateWithMaxCrossAxisExtent）的用法，覆盖不同网格布局需求。
2. Flutter Cookbook实战指南
   • 包含「创建可滚动的SliverAppBar」「用SliverGrid展示网格内容」等实战教程，带完整代码示例，适合边练边学。
3. Flutter官方视频教程
   • 官方频道有Sliver组件的深度解析视频，直观展示Sliver的滚动原理、嵌套滚动实现、自定义Sliver等进阶内容。
4. Flutter Widget of the Week系列
   • 短平快的小视频，分别讲解SliverAppBar和SliverGrid的核心特性，适合快速入门掌握基础用法。

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