Flutter 如何为动态尺寸的GridView添加带阴影的可扩展外层Container

需求说明 #

需要承载一个尺寸动态变化的个人资料GridView。

当前实现代码 #

class Applicants extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: Container(
            padding: EdgeInsets.all(20),
            child: GridView.builder(
              clipBehavior: Clip.none,
              itemCount: 10,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
              ),
              itemBuilder: (context, index) => _buildBox(context, index),
            ),
          ),
        ),
      ],
    );
  }
}

解决方案 #

嵌套带阴影的Container失败的核心原因：

1. 默认GridView是可滚动组件，自身高度为无限值，父级Container未指定高度时无法感知GridView的实际内容高度
2. 外层的Expanded组件强制让Container占满父级剩余可用空间，无法跟随GridView内容自适应高度

修改后的完整代码

class Applicants extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 移除外层Expanded，避免强制拉伸
        Container(
          padding: EdgeInsets.all(20),
          // 配置阴影、背景色、圆角，可按需调整参数
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 10,
                offset: Offset(0, 2),
              )
            ],
          ),
          child: GridView.builder(
            clipBehavior: Clip.none,
            itemCount: 10,
            // 开启自适应内容高度
            shrinkWrap: true,
            // 关闭GridView自身滚动，若需要单独滚动GridView可删除该行并给外层Container设置固定高度
            physics: NeverScrollableScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
            ),
            itemBuilder: (context, index) => _buildBox(context, index),
          ),
        ),
      ],
    );
  }
}

补充说明

如果GridView内容总高度超过页面高度需要滚动，只需将最外层Column嵌套到SingleChildScrollView组件中即可。

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