Flutter：Image over Image，部分显示上部图像作为提供的值（例如1到10）答案

【问题标题】：Flutter: Image over Image, show upper image partially as value provided (e.g. 1 to 10)Flutter：Image over Image，部分显示上部图像作为提供的值（例如1到10）
【发布时间】：2021-05-15 07:21:32
【问题描述】：

我有一个图像视图，它显示两个图像（一个在另一个之上）。（我是用 Stack 实现的）

现在，背面的图像将保持静止。（完成）

顶部的图像将从右下角显示。（我要问的问题）

如下图所示。

如果您在屏幕截图中注意到，该表情符号是如何从右下角显示出来的。

显示有 10 个不同的步骤（例如，1 表示完全显示，5 表示一半，10 表示完全隐藏）

如何在颤振 Dart 中实现这一点？

编辑：

现在我遇到了图像屏蔽问题。（见下面的截图）

【问题讨论】：

Postioned 小部件内部有一个宽度参数用于堆栈。或者使用 Postioned 小部件的左、右参数。
如果您需要示例代码，请发表评论。
是的，如果你能提供示例代码会很棒。
有点难理解你的问题，如果你有 10 个不同的步骤，你可以用你的 10 个图像 url（或资产路径）创建一个数组，然后根据步骤索引显示图像.像 List 图像； int _step = 0; return Container(... src: image[_step] ...; 但我不确定我是否正确理解了您想要实现的目标。
@RasheshBosamiya 确定

标签： flutter dart flutter-layout flutter-image

【解决方案1】：

class Demo extends StatelessWidget {
  int step = 5;
  int maxStep = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ClipOval(
          child: Stack(
            children: [
              Img.back(),
              Positioned(
                child: Img.front(),
                top: step * 200 / maxStep,
                left: step * 200 / maxStep,
              ),
            ],
          ),
        ),
      ),
    );
  }
}


class Img extends StatelessWidget {
  final Color fill;

  Img.back([this.fill = Colors.green]);

  Img.front([this.fill = Colors.blue]);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: fill,
    );
  }
}

Dartpad 不支持本地 Image 所以我用了一个简单的容器，但概念是一样的。

【讨论】：

感谢您的回答，我检查了您的解决方案。它正在工作 85%
现在我遇到的问题是图像掩蔽，图像在背面。
虽然你的解决方案是 100% 正确的
顶部图像必须有透明部分才能使蒙版正常工作。
photoshop。顶部图像应该只有图像中的人被透明像素背景包围。