如何解决Flutter:图像覆盖图像,部分显示上图作为提供的值例如 1 到 10
我有一个图像视图,显示两个图像(一个在另一个之上)。 (我是用 Stack 实现的)
现在,背面的图像将保持静态。 (到此结束)
顶部的图像将从右下角显示。 (我要问的问题)
喜欢下面的截图。
如果您在屏幕截图中注意到,该表情符号是如何从右下角显示的。
显示有 10 个不同的步骤(例如,1 表示完全显示,5 表示一半,10 表示同样完全隐藏)
如何在 Flutter Dart 中实现这一点?
编辑:
现在我遇到了图像遮罩的问题。 (见下图)
解决方法
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 所以我使用了一个简单的容器,但概念是一样的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。