【flutter】同时实现Container内阴影与外阴影-Toy模板网

这篇具有很好参考价值的文章主要介绍了【flutter】同时实现Container内阴影与外阴影。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

flutter container 阴影,flutter,前端,flutter,android,ios,ui

思路：

1. 首先把背景用阴影色填充。

flutter container 阴影,flutter,前端,flutter,android,ios,ui

Container(
  width: 63,
  height: 63,
  decoration: const BoxDecoration(
    color: Color(0xFFE8E8E8),
    shape: BoxShape.circle,
  ),
),

2. 然后实现外阴影。

flutter container 阴影,flutter,前端,flutter,android,ios,ui

Container(
  width: 63,
  height: 63,
  decoration: const BoxDecoration(
    color: Color(0xFFE8E8E8),
    shape: BoxShape.circle,
    boxShadow: [
      BoxShadow(
        color: Color(0xFFE8E8E8),
        offset: Offset(8, 8),
        blurRadius: 10,
        spreadRadius: 1,
      ),
    ],
  ),
),

3. 关键步骤，叠加一层原来背景色的阴影

由于叠加的阴影有向右下方的偏移，露出的背景构成了内阴影。

这里的模糊半径使得内阴影附带了模糊，但外阴影的轮廓也模糊了（下面解决）。

flutter container 阴影,flutter,前端,flutter,android,ios,ui

Stack(
  alignment: AlignmentDirectional.center,
  children: [
    Container(
      width: 63,
      height: 63,
      decoration: const BoxDecoration(
        color: Color(0xFFE8E8E8),
        shape: BoxShape.circle,
        boxShadow: [
          BoxShadow(
            color: Color(0xFFE8E8E8),
            offset: Offset(8, 8),
            blurRadius: 10,
            spreadRadius: 1,
          ),
        ],
      ),
    ),
      Container(
      width: 63,
      height: 63,
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        boxShadow: [
          BoxShadow(
            color: Color(0xFFF7F7F7),
            offset: Offset(3, 3),
            blurRadius: 3,
            spreadRadius: 1,
          ),
        ],
      ),
    ),
  ],
),

最后加入裁切，解决外阴影边缘模糊的问题。

只要把第3步中多余的阴影裁掉即可，ClipRRect裁切掉右下溢出的多余阴影，形成锐利的边缘。

flutter container 阴影,flutter,前端,flutter,android,ios,ui

完整代码：文章来源地址https://www.toymoban.com/news/detail-551071.html

Stack(
  alignment: AlignmentDirectional.center,
  children: [
    Container(
      width: 63,
      height: 63,
      decoration: const BoxDecoration(
        color: Color(0xFFE8E8E8),
        shape: BoxShape.circle,
        boxShadow: [
          BoxShadow(
            color: Color(0xFFE8E8E8),
            offset: Offset(8, 8),
            blurRadius: 10,
            spreadRadius: 1,
          ),
        ],
      ),
    ),
    ClipRRect(
      borderRadius: BorderRadius.circular(63),
      child: Container(
        width: 63,
        height: 63,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          boxShadow: [
            BoxShadow(
              color: Color(0xFFF7F7F7),
              offset: Offset(3, 3),
              blurRadius: 3,
              spreadRadius: 1,
            ),
          ],
        ),
      ),
    ),
  ],
),

到了这里，关于【flutter】同时实现Container内阴影与外阴影的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！