【flutter】同时实现Container内阴影与外阴影

最新推荐文章于 2024-08-15 19:40:35 发布

枝江码农呜哇哇

最新推荐文章于 2024-08-15 19:40:35 发布

阅读量7.1k

点赞数 4

分类专栏： flutter 文章标签：前端 flutter android ios ui

本文链接：https://blog.csdn.net/zhongyanxl/article/details/124630461

版权

flutter 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：

思路：

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

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

2. 然后实现外阴影。

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. 关键步骤，叠加一层原来背景色的阴影

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

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

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裁切掉右下溢出的多余阴影，形成锐利的边缘。

完整代码：

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,
            ),
          ],
        ),
      ),
    ),
  ],
),