Flutter布局疑问：如何实现顶部卡片随商品网格联动滚动？

以下是我当前的布局：

以及对应的构建Widget代码：

import 'package:flutter/material.dart';

class Example extends StatelessWidget {
  const Example({
    Key? key,
    List<Product> products,
  }) : super(key: key);

  final List<Product> products;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TitleCard(),
          OptionsCard(),
          Expanded(
            child: LayoutBuilder(
              builder: (context, constraints) => GridView.count(
                crossAxisCount: 3,
                children: [
                  for (final product in products) ProductCard(product),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

目前仅LayoutBuilder中的商品网格可滚动，我希望滚动时顶部两张卡片先滑出视野，再滚动商品列表。尝试用ListView包裹整个布局失败，请问能否通过嵌套LayoutBuilder实现该效果？

不需要嵌套LayoutBuilder，用CustomScrollView就能实现整体滚动的需求，把顶部卡片和网格统一放到slivers列表中即可。如果确实需要用到LayoutBuilder获取布局约束，也可以将其嵌套在Sliver组件内部。

直接实现整体滚动的代码示例 #

import 'package:flutter/material.dart';

class Example extends StatelessWidget {
  const Example({
    Key? key,
    required this.products,
  }) : super(key: key);

  final List<Product> products;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          // 顶部卡片会随滚动整体滑出视野
          SliverToBoxAdapter(child: TitleCard()),
          SliverToBoxAdapter(child: OptionsCard()),
          // 商品网格以SliverGrid形式加入，和顶部组件同步滚动
          SliverGrid(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            delegate: SliverChildBuilderDelegate(
              (context, index) => ProductCard(products[index]),
              childCount: products.length,
            ),
          ),
        ],
      ),
    );
  }
}

嵌套LayoutBuilder的版本（如需获取布局约束） #

如果要保留LayoutBuilder来获取父组件约束（比如动态调整网格参数），可以把它嵌套在SliverChildBuilderDelegate的构建逻辑中：

SliverGrid(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return LayoutBuilder(
        builder: (context, constraints) {
          // 这里可以使用constraints做自定义布局逻辑
          return ProductCard(products[index]);
        },
      );
    },
    childCount: products.length,
  ),
)

之前用ListView包裹失败，核心原因是GridView自带滚动逻辑，和ListView的滚动行为冲突，而CustomScrollView可以统一管理所有可滚动组件的滚动状态，实现顶部卡片和商品列表的同步滚动。

内容的提问来源于stack exchange，提问作者Cole Van Vlack