Flutter：如何阻止NestedScrollView点击搜索栏时自动滚动至顶部

一、阻止点击搜索栏时列表自动滚动到顶部 #

点击搜索栏触发自动滚动的核心原因是：搜索栏获取焦点时，Flutter会自动将关联的滚动视图滚动到焦点控件可见位置，而NestedScrollView的默认滚动联动机制会把body内的列表滚到顶部。可以通过以下两种方式解决：

方法1：给列表设置独立ScrollController并禁用primary属性 #

将body内的列表（如ListView/GridView）的primary设为false，同时自定义ScrollController，切断与系统默认PrimaryScrollController的关联，避免焦点变化触发自动滚动：

class _MyPageState extends State<MyPage> {
  final ScrollController _listScrollController = ScrollController();
  final FocusNode _searchFocusNode = FocusNode();

  @override
  void dispose() {
    _listScrollController.dispose();
    _searchFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverAppBar(
              pinned: true,
              title: TextField(
                focusNode: _searchFocusNode,
                decoration: const InputDecoration(hintText: '搜索'),
              ),
            ),
          ];
        },
        body: ListView.builder(
          primary: false, // 禁用系统默认滚动控制器关联
          controller: _listScrollController,
          itemCount: 50,
          itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
        ),
      ),
    );
  }
}

方法2：监听焦点变化恢复滚动位置 #

如果无法修改列表的primary属性，可以通过监听搜索栏的焦点状态，在获取焦点时保存并恢复当前滚动位置：

@override
void initState() {
  super.initState();
  _searchFocusNode.addListener(() {
    if (_searchFocusNode.hasFocus) {
      final currentOffset = _listScrollController.offset;
      // 延迟执行，覆盖系统自动滚动行为
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _listScrollController.jumpTo(currentOffset);
      });
    }
  });
}

二、消除AppBar与列表之间的间隙 #

间隙通常来自三个地方：列表的默认顶部padding、SliverAppBar的默认配置、状态栏相关的额外间距。可以逐一处理：

1. 移除列表默认顶部padding #

ListView默认会添加与状态栏匹配的顶部padding，设置padding: EdgeInsets.zero即可消除：

ListView.builder(
  padding: EdgeInsets.zero,
  // ...其他属性
)

2. 调整SliverAppBar配置 #

去掉SliverAppBar的阴影、无用的bottom占位，明确工具栏高度：

SliverAppBar(
  pinned: true,
  elevation: 0, // 移除阴影间隙
  toolbarHeight: 56, // 固定工具栏高度，避免默认额外空间
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(0), // 底部占位高度设为0
    child: Container(),
  ),
  // ...其他属性
)

3. 移除状态栏相关间距 #

如果是状态栏导致的顶部间隙，用MediaQuery.removePadding包裹NestedScrollView：

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: NestedScrollView(
    // ...嵌套滚动视图内容
  ),
)

三、优化代码结构 #

将UI组件拆分，逻辑与UI分离，提升代码可读性和维护性：

1. 拆分SliverHeader组件 #

把headerSliverBuilder的内容抽成独立Widget：

Widget _buildSliverHeader() {
  return SliverAppBar(
    pinned: true,
    elevation: 0,
    title: TextField(
      focusNode: _searchFocusNode,
      decoration: const InputDecoration(hintText: '搜索'),
    ),
  );
}

2. 拆分列表组件 #

将body内的列表抽成独立Widget，传入必要的控制器：

Widget _buildContentList(ScrollController controller) {
  return ListView.builder(
    primary: false,
    controller: controller,
    padding: EdgeInsets.zero,
    itemCount: 50,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  );
}

3. 简化build方法 #

最终的build方法会更简洁清晰：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: MediaQuery.removePadding(
      context: context,
      removeTop: true,
      child: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [_buildSliverHeader()],
        body: _buildContentList(_listScrollController),
      ),
    ),
  );
}

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