代码之家 › 专栏 › 技术社区 › Moshe Shaham

如何将两个图标一个叠在另一个上?

flutter

Moshe Shaham · 技术社区 · 3 年前

我有两个图标在一个堆栈中。我想要一个隐藏另一个,但它是半透明的,另一个显示在它后面。

以下是代码:

Stack(
     children: [
         Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 10),),
         Container(child: Icon(Icons.account_circle_rounded), padding: EdgeInsets.only(left: 20),),
    ],
)

看起来是这样的:

1 回复 | 直到 3 年前

Md. Yeasin Sheikh 3 年前

Icons 更像SVG,使用矢量绘制形状。图标中有一些空白用于绘制路径,我们可以通过这一点看到背景。此外,它周围包含填充,您可以使用资源绘制UI。

我们可以用另一个包裹 ColoredBox 隐藏背景图标,但它将从 IconData .

这段代码显示了基本级别的结构。

SizedBox(
  height: 24,
  width: 24 * 1.7,
  child: Stack(
    alignment: Alignment.center,
    children: [
      Align(
        alignment: Alignment.centerLeft,
        child: Container(
          child: const Icon(
            Icons.account_circle_rounded,
          ),
          decoration: const BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
          ),
        ),
      ),
      Align(
        alignment: Alignment.centerRight,
        child: Container(
          child: const Icon(
            Icons.account_circle_sharp,
          ),
          decoration: const BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
          ),
        ),
      ),
    ],
  ),
),