Flutter如何实现图标部分显示？叠加图标百分比展示问题

目标效果 #

需求 #

展示一个完整的灰色图标，在其上方叠加同类型但不同颜色的图标，仅显示上层图标的指定比例（例如下半部分的50%）。

尝试使用Stack和Align的heightFactor属性实现，但效果不符合预期，出现图标偏移问题。

尝试的代码 #

class TestWidget extends StatefulWidget {
  const TestWidget({super.key});

  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  GlobalKey aKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.grey[200],
        child: Align(
          alignment: const Alignment(-0.85, -0.85),
          child: Wrap(children: [
            Stack(
              children: [
                Center(
                    child: Icon(
                        key: aKey,
                        Symbols.thunderstorm,
                        color: Colors.blueGrey,
                        size: 100)),
                Column(
                  children: [
                    LayoutBuilder(builder: (context, _) {
                      RenderBox renderbox =
                          aKey.currentContext!.findRenderObject() as RenderBox;

                      return SizedBox(height: renderbox.size.height * 0.25);
                    }),
                    const ClipRect(
                        child: Align(
                      heightFactor:
                          0.5, // Set this to 0.8 to see the displaced, unmatching image.
                      child: Icon(Symbols.thunderstorm,
                          color: Colors.red, size: 100),
                    ))
                  ],
                )
              ],
            )
          ]),
        ));
  }
}

当前问题 #

当heightFactor设为0.5和0.8时，输出效果分别如下：

方法1：自定义ClipPath裁剪（精准控制） #

通过自定义裁剪器，直接指定上层图标的显示区域，确保和底层图标完全对齐，没有偏移。

示例代码：

class TestWidget extends StatelessWidget {
  const TestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[200],
      child: Align(
        alignment: const Alignment(-0.85, -0.85),
        child: Stack(
          alignment: Alignment.center, // 强制两个图标中心对齐
          children: [
            // 底层灰色图标
            const Icon(
              Symbols.thunderstorm,
              color: Colors.blueGrey,
              size: 100,
            ),
            // 上层裁剪后的红色图标
            ClipPath(
              clipper: PartialIconClipper(showRatio: 0.5), // 显示下半部分50%
              child: const Icon(
                Symbols.thunderstorm,
                color: Colors.red,
                size: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义裁剪器，控制显示比例
class PartialIconClipper extends CustomClipper<Path> {
  final double showRatio; // 取值0-1，1=显示全部，0.5=显示下半部分50%

  PartialIconClipper({required this.showRatio});

  @override
  Path getClip(Size size) {
    final path = Path();
    // 绘制保留区域的矩形：从底部向上取showRatio比例的高度
    path.addRect(Rect.fromLTWH(
      0,
      size.height * (1 - showRatio),
      size.width,
      size.height * showRatio,
    ));
    return path;
  }

  @override
  bool shouldReclip(covariant PartialIconClipper oldClipper) {
    return oldClipper.showRatio != showRatio;
  }
}

方法2：Transform.translate结合ClipRect #

通过平移上层图标，抵消Align(heightFactor)带来的偏移，确保和底层图标对齐。

示例代码：

class TestWidget extends StatelessWidget {
  const TestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    const iconSize = 100.0;
    const showRatio = 0.5; // 要显示的比例

    return Container(
      color: Colors.grey[200],
      child: Align(
        alignment: const Alignment(-0.85, -0.85),
        child: Stack(
          alignment: Alignment.center,
          children: [
            // 底层灰色图标
            const Icon(
              Symbols.thunderstorm,
              color: Colors.blueGrey,
              size: iconSize,
            ),
            ClipRect(
              child: Transform.translate(
                // 向上平移图标，抵消Align的偏移
                offset: Offset(0, iconSize * (1 - showRatio) / 2),
                child: Align(
                  heightFactor: showRatio,
                  child: const Icon(
                    Symbols.thunderstorm,
                    color: Colors.red,
                    size: iconSize,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

原代码问题分析 #

原代码使用Column+SizedBox调整位置，再结合GlobalKey获取尺寸，存在布局时机问题，导致图标偏移。Align(heightFactor)是基于父容器高度计算显示区域，而非图标自身尺寸，这也会导致对齐偏差。直接用Stack的alignment属性强制两个图标中心对齐，再通过裁剪控制显示区域，就能彻底解决对齐问题。

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