Flutter中NestedScrollView搭配SliverAppBar底部出现多余空白

问题描述 #

使用NestedScrollView嵌套SliverAppBar，将搜索栏作为SliverAppBar的标题，折叠功能正常，但滚动时SliverAppBar下方会出现多余空白区域。移除SafeArea后空白消失，但内容会与状态栏重叠。

代码片段 #

Scaffold(
  body: NestedScrollView(
    floatHeaderSlivers: true,
    headerSliverBuilder: (context, innerBoxIsScrolled) => [
      SliverAppBar(
        floating: true,
        toolbarHeight: kToolbarHeight,
        title: Searchbar(
          searchController: _searchController,
          filterItems: _filterItems,
        ),
      ),
    ],
    body: SafeArea(
      child: GridView.builder(
        padding: const EdgeInsets.all(10),
        itemCount: filteredItems.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          childAspectRatio: 1.2,
        ),
        itemBuilder: (BuildContext context, int index) {
          final item = filteredItems[index].data() as Map<String, dynamic>;
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(item['Data'] ?? 'No Data'),
                  Text('Category: ${item['Category'] ?? 'Unknown'}'),
                ],
              ),
            ),
          );
        },
      ),
    ),
  ),
);

已尝试方法 #

• 移除SafeArea：空白消失，但内容与状态栏重叠。

解决方案 #

问题根源是SafeArea的位置错误，它给GridView顶部添加了状态栏高度的padding，当SliverAppBar滚动离开顶部时，这个padding就会变成可见的空白。可以通过以下两种方式修复：

方法1：将SafeArea移到NestedScrollView外层 #

把SafeArea包裹整个NestedScrollView，让状态栏的padding只作用在页面最顶部，不会影响滚动区域：

Scaffold(
  body: SafeArea(
    child: NestedScrollView(
      floatHeaderSlivers: true,
      headerSliverBuilder: (context, innerBoxIsScrolled) => [
        SliverAppBar(
          floating: true,
          toolbarHeight: kToolbarHeight,
          title: Searchbar(
            searchController: _searchController,
            filterItems: _filterItems,
          ),
        ),
      ],
      body: GridView.builder(
        padding: const EdgeInsets.all(10),
        itemCount: filteredItems.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          childAspectRatio: 1.2,
        ),
        itemBuilder: (BuildContext context, int index) {
          final item = filteredItems[index].data() as Map<String, dynamic>;
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(item['Data'] ?? 'No Data'),
                  Text('Category: ${item['Category'] ?? 'Unknown'}'),
                ],
              ),
            ),
          );
        },
      ),
    ),
  ),
);

方法2：给SafeArea设置top: false #

保留SafeArea在body中，但关闭顶部安全区域适配，让SliverAppBar负责处理顶部状态栏的间距：

Scaffold(
  body: NestedScrollView(
    floatHeaderSlivers: true,
    headerSliverBuilder: (context, innerBoxIsScrolled) => [
      SliverAppBar(
        floating: true,
        toolbarHeight: kToolbarHeight,
        title: Searchbar(
          searchController: _searchController,
          filterItems: _filterItems,
        ),
      ),
    ],
    body: SafeArea(
      top: false, // 关闭顶部安全区域适配
      child: GridView.builder(
        padding: const EdgeInsets.all(10),
        itemCount: filteredItems.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          childAspectRatio: 1.2,
        ),
        itemBuilder: (BuildContext context, int index) {
          final item = filteredItems[index].data() as Map<String, dynamic>;
          return Card(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(item['Data'] ?? 'No Data'),
                  Text('Category: ${item['Category'] ?? 'Unknown'}'),
                ],
              ),
            ),
          );
        },
      ),
    ),
  ),
);

两种方法都能在保留状态栏适配的同时，消除滚动时的多余空白，根据你的布局需求选择即可。

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