Flutter中GridView.Builder仅自身滚动，如何实现整页滚动？

核心解决方案 #

给GridView.builder添加两个关键参数，让它放弃自身滚动能力，交由父级可滚动组件控制整页滚动：

• shrinkWrap: true：让GridView根据子项总高度自适应自身高度，而非强制占满可用空间
• physics: NeverScrollableScrollPhysics()：禁用GridView自身的滚动物理效果

修改后的代码 #

FutureBuilder<List<Product>>(
  future: productFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Center(child: CircularProgressIndicator());
    } else if (snapshot.hasData) {
      final product = snapshot.data;
      return buildProduct(product!);
    } else {
      return Text("No widget to build");
    }
  },
),

Widget buildProduct(List<Product> product) => GridView.builder(
  // 添加以下两个参数
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 300,
      childAspectRatio: 3.15 / 5,
      crossAxisSpacing: 5,
      mainAxisSpacing: 10),
  itemCount: product.length,
  itemBuilder: (context, index) {
    final productItem = product[index];
    final media = product[index].media?.map((e) => e.toJson()).toList();
    final photo = media?[0]['links']['local']['thumbnails']['350'];
    return Container();
  },
);

补充说明 #

如果页面中除了GridView还有其他顶部/底部组件，需要将整个页面内容（包括FutureBuilder）包裹在SingleChildScrollView中，实现整页内容一起滚动：

SingleChildScrollView(
  child: Column(
    children: [
      // 其他顶部组件，比如标题、筛选栏等
      FutureBuilder<List<Product>>(
        // ... 你的FutureBuilder代码
      ),
      // 其他底部组件
    ],
  ),
)

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