Flutter Card内添加Container后顶部elevation阴影不生效问题

Card组件默认clipBehavior属性为Clip.none，不会对子组件超出自身边界的部分做裁剪。你示例中的Container未设置与Card匹配的圆角，其直角边缘会溢出Card顶部的圆角区域，直接覆盖掉Card的顶部阴影。如果Card的父组件未预留足够的显示空间，也可能出现阴影被父组件边界裁剪的情况。

下面是两种常用的修复方案：

• 方案1：修改Card的裁剪行为，强制裁剪超出Card边界的子组件内容，改动最小

Card(
  elevation: 10,
  shadowColor: Colors.green,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12.0),
  ),
  // 新增此行配置裁剪行为即可
  clipBehavior: Clip.hardEdge,
  child: Column(
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // widget goes here
          ],
        ),
      ),
      SizedBox(
        height: 20,
      ),
      // some more widgets
    ],
  ),
);

如果要追求更顺滑的圆角效果，可以把clipBehavior换成Clip.antiAlias。

• 方案2：给Card增加内边距，让子组件不紧贴Card边界，自然不会遮挡阴影

Card(
  elevation: 10,
  shadowColor: Colors.green,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12.0),
  ),
  // 可选：添加外边距避免父组件裁剪阴影
  margin: const EdgeInsets.all(8),
  child: Padding(
    // 添加内边距让子组件和Card边界拉开距离
    padding: const EdgeInsets.all(8),
    child: Column(
      children: <Widget>[
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // widget goes here
            ],
          ),
        ),
        SizedBox(
          height: 20,
        ),
        // some more widgets
      ],
    ),
  ),
);

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