解决Flutter中GridView子项Container阴影被截断的问题

问题描述 #

使用GridView.builder渲染一系列Container组件，开启开关后，Container的box shadow出现被截断的情况：
[开关开启后阴影被截断的效果]

尝试给GridView.builder添加padding后，布局出现混乱：
[添加padding后布局混乱的效果]

相关代码 #

GridLayout类 #

import 'package:flutter/material.dart';
import 'package:project/utils/constants/sizes.dart';

class GridLayout extends StatelessWidget {
  const GridLayout({
    Key? key,
    required this.itemCount,
    required this.itemBuilder,
    this.mainAxisExtent = 190,
  }) : super(key: key);

  final int itemCount;
  final Widget? Function(BuildContext, int) itemBuilder;
  final double? mainAxisExtent;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: itemCount,
      shrinkWrap: true,
      padding: EdgeInsets.zero,
      physics: const NeverScrollableScrollPhysics(),
      clipBehavior: Clip.none,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisExtent: mainAxisExtent,
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
      ),
      itemBuilder: itemBuilder,
    );
  }
}

GridItem类 #

import 'package:flutter/material.dart';
import 'package:project/utils/constants/colors.dart';
import 'package:project/utils/constants/sizes.dart';

class GridItem extends StatefulWidget {
  const GridItem({
    Key? key,
    required this.name,
    this.child,
    this.imagePath,
    this.hasSwitch = false,
  }) : super(key: key);

  final String name;
  final Widget? child;
  final String? imagePath;
  final bool hasSwitch;

  @override
  State<GridItem> createState() {
    return _GridItemState();
  }
}

class _GridItemState extends State<GridItem> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: isSwitched ? Color(0xFF535353) : Color(0xFFF5F6FA),
        boxShadow: isSwitched
            ? [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  offset: const Offset(4.0, 4.0),
                  blurRadius: 5.0,
                  spreadRadius: 2.0,
                ),
              ]
            : [],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          widget.imagePath != null
              ? Container(
                  width: 50,
                  height: 50,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xFFE0E0E0),
                  ),
                  child: Center(
                    child: Image.asset(
                      widget.imagePath!,
                      height: 40,
                      fit: BoxFit.cover,
                    ),
                  ),
                )
              : const SizedBox(),
          const SizedBox(height: 8),
          Text(
            widget.name,
            style: Theme.of(context)
                .textTheme
                .titleLarge!
                .apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
          ),
          const Spacer(),
          widget.hasSwitch
              ? Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      isSwitched ? "On" : "Off",
                      style: Theme.of(context)
                          .textTheme
                          .titleLarge!
                          .apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
                    ),
                    Switch(
                      value: isSwitched,
                      onChanged: (value) {
                        setState(() {
                          isSwitched = value;
                        });
                      },
                    )
                  ],
                )
              : const SizedBox(),
        ],
      ),
    );
  }
}

解决方案 #

阴影被截断的核心原因是GridView的子组件没有足够空间展示阴影，即便设置了clipBehavior: Clip.none，子组件的布局边界仍会限制阴影绘制范围。以下两种方法可解决该问题：

方法1：给GridItem添加外层Padding #

无需修改GridView的padding，给每个GridItem的外层套一个带透明padding的容器，为阴影预留绘制空间：
修改GridItem的build方法：

@override
Widget build(BuildContext context) {
  // 根据阴影参数设置padding，确保阴影能完整显示
  return Padding(
    padding: const EdgeInsets.only(right: 8, bottom: 8),
    child: Container(
      padding: const EdgeInsets.all(15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: isSwitched ? Color(0xFF535353) : Color(0xFFF5F6FA),
        boxShadow: isSwitched
            ? [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  offset: const Offset(4.0, 4.0),
                  blurRadius: 5.0,
                  spreadRadius: 2.0,
                ),
              ]
            : [],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          widget.imagePath != null
              ? Container(
                  width: 50,
                  height: 50,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xFFE0E0E0),
                  ),
                  child: Center(
                    child: Image.asset(
                      widget.imagePath!,
                      height: 40,
                      fit: BoxFit.cover,
                    ),
                  ),
                )
              : const SizedBox(),
          const SizedBox(height: 8),
          Text(
            widget.name,
            style: Theme.of(context)
                .textTheme
                .titleLarge!
                .apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
          ),
          const Spacer(),
          widget.hasSwitch
              ? Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      isSwitched ? "On" : "Off",
                      style: Theme.of(context)
                          .textTheme
                          .titleLarge!
                          .apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
                    ),
                    Switch(
                      value: isSwitched,
                      onChanged: (value) {
                        setState(() {
                          isSwitched = value;
                        });
                      },
                    )
                  ],
                )
              : const SizedBox(),
        ],
      ),
    ),
  );
}

padding数值可根据阴影参数调整，示例中阴影的offset为(4,4)、spreadRadius为2、blurRadius为5，因此right和bottom方向留8的空间即可完整展示阴影。

方法2：增大GridView的间距 #

若不想添加外层Padding，可直接调大GridView的间距，为阴影预留空间：
修改GridLayout中的gridDelegate：

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  mainAxisExtent: mainAxisExtent,
  // 原间距16调整为24，为阴影留出额外空间
  mainAxisSpacing: 24,
  crossAxisSpacing: 24,
),

该方法无需修改GridItem，但会改变网格整体间距，需结合UI需求调整。

为什么添加GridView的padding会导致布局混乱？ #

由于GridView设置了shrinkWrap: true，会根据子组件尺寸自适应高度。此时添加padding会让GridView整体尺寸变大，可能与父布局约束冲突，导致布局错位。而给子组件单独加padding仅影响单个Item的布局范围，不会破坏GridView的自适应逻辑。

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