如何让Flutter中顶部容器与GridView.builder内容一同滚动？

要实现顶部容器与GridView内容一起滚动，只需调整布局结构和GridView的属性：

• 用SingleChildScrollView包裹整个Column，让页面所有内容成为可滚动整体
• 删除GridView外层容器的固定高度设置，避免高度限制导致滚动异常
• 给GridView添加两个关键属性：
  • shrinkWrap: true：让GridView根据子项总高度自适应自身高度
  • physics: const NeverScrollableScrollPhysics()：禁用GridView自身的滚动功能，避免和外层滚动冲突

修改后的完整代码：

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomBar(),
      body: SingleChildScrollView( // 新增外层滚动容器
        child: Column(
          children: [
            Container(
              width: 550,
              height: 200,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(16),
                  image: const DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage("assetss/fortuneteller.jpg"))),
            ),

            SizedBox(
              height: 30,
            ),

            Padding(
              padding: const EdgeInsets.only(
                left: 15,
                right: 15,
              ),
              child: GridView.builder(
                shrinkWrap: true, // 新增属性
                physics: const NeverScrollableScrollPhysics(), // 新增属性
                itemBuilder: (BuildContext context, int index) {
                  return CardForFortuneTellers();
                },
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  mainAxisExtent: 500,
                  mainAxisSpacing: 0,
                  crossAxisCount: 2,
                ),
                itemCount: 10,
              ),
            )
          ],
        ),
      ),
    );
  }
}

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