Flutter中如何实现容器角落阴影的多层重叠效果

你可以直接利用BoxDecoration的boxShadow属性（它本身是一个List）添加多层阴影，不需要嵌套过多Container，下面是优化后的实现方案：

核心修改点 #

• 在boxShadow列表中添加第二个BoxShadow，通过调整offset参数实现更小的阴影效果
• 简化Container嵌套层级，减少不必要的嵌套

修改后的完整代码 #

Container(
  height: kMainPageContainerHeightSize,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    border: Border.all(
      color: kDisabledColor,
      width: 5,
    ),
  ),
  child: Padding(
    padding: const EdgeInsets.only(left: 16, bottom: 16, top: 16),
    child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: kBackgroundMainColor,
        // 添加多层阴影
        boxShadow: const [
          // 第一层大阴影
          BoxShadow(
            color: kDisabledColor,
            offset: Offset(20, 0),
          ),
          // 第二层更小的阴影，调整offset实现缩小效果
          BoxShadow(
            color: kDisabledColor,
            offset: Offset(12, 0),
            // 若需要更淡的效果，可添加模糊或调整透明度
            // blurRadius: 2,
            // color: kDisabledColor.withOpacity(0.8),
          ),
        ],
      ),
      child: CustomTimeTable(
        controller: viewmodel.customTimeTableController,
        rowHeight: kMainPageContainerHeightSize / 9,
      ),
    ),
  ),
)

额外说明 #

• 若想让阴影更有层次感，可调整每个BoxShadow的color（比如降低透明度）、blurRadius（模糊程度）、spreadRadius（扩散范围）参数，匹配预期效果
• 移除了原代码中多余的内层Container，减少Widget层级，提升性能

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