Flutter：如何让GridView.builder占满剩余屏幕并联动滚动

核心思路是让搜索栏固定在顶部，下方的筛选标签、排序栏和商品网格使用CustomScrollView实现统一滚动，既避免嵌套滚动的布局冲突，也能完美适配所有设备。

修改后的完整代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

import '../widgets.dart/search_results_chip.dart';

class ItemSearchResults extends StatelessWidget {
  const ItemSearchResults({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        children: [
          // 固定在顶部的搜索栏
          Row(
            children: [
              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.arrow_back),
              ),
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                    isCollapsed: true,
                    prefixIcon: const Icon(Icons.category),
                    suffixIcon: const Icon(Icons.search),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30),
                    ),
                  ),
                ),
              ),
              IconButton(
                onPressed: () {},
                icon: const Icon(Icons.filter_alt_outlined),
              ),
            ],
          ),
          const SizedBox(height: 6),
          // 滚动区域从这里开始
          Expanded(
            child: CustomScrollView(
              slivers: [
                // 横向筛选标签栏
                SliverToBoxAdapter(
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    height: 60,
                    child: ListView(
                      scrollDirection: Axis.horizontal,
                      children: const [
                        SearchResultsChip(title: 'Free Delivery', showDropDown: false),
                        SearchResultsChip(title: 'Price', showDropDown: true),
                        SearchResultsChip(title: 'Estimated Delivery', showDropDown: true),
                      ],
                    ),
                  ),
                ),
                // 排序栏
                SliverToBoxAdapter(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(30),
                    ),
                    child: Row(
                      children: [
                        const Text(
                          'Relevance',
                          style: TextStyle(color: Colors.white),
                        ),
                        IconButton(
                          onPressed: () {},
                          icon: const Icon(Icons.sort, color: Colors.white),
                        ),
                      ],
                    ),
                  ),
                ),
                // 商品网格
                SliverGrid.builder(
                  itemCount: 10,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    crossAxisSpacing: 4,
                    mainAxisSpacing: 4, // 可选：添加纵向间距优化布局
                  ),
                  itemBuilder: (context, index) {
                    return Column(
                      children: [
                        Expanded(
                          child: Image.network(
                            'https://images.unsplash.com/photo-1633435597643-601bb3efc197?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGVwb3h5JTIwdGFibGV8ZW58MHx8MHx8fDA%3D',
                            fit: BoxFit.cover,
                          ),
                        ),
                      ],
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点说明：

• 搜索栏保留在Column顶部，不参与滚动，直接实现固定效果。
• 用CustomScrollView替代原SingleChildScrollView+Column的组合，它可整合多种滚动组件（sliver）实现统一滚动逻辑。
• 横向筛选标签栏和排序栏通过SliverToBoxAdapter包裹，将普通Widget转换为sliver组件，融入滚动流。
• 用SliverGrid.builder替换GridView.builder，直接作为sliver组件在CustomScrollView中滚动，无需设置shrinkWrap和NeverScrollablePhysics，自动适配设备高度。

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