flutter - 创建内部带有透明孔的小部件
解决方案
我发现的“最简单”的方法是使用带有Stack的ColorFiltered Widget。
以下代码将准确创建您需要的内容:
@override
Widget build(BuildContext context) {
return Material(
child: Stack(
fit: StackFit.expand,
children: [
Image.network(
'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
fit: BoxFit.cover,
),
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.8), BlendMode.srcOut), // This one will create the magic
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut), // This one will handle background + difference out
),
Align(
alignment: Alignment.topCenter,
child: Container(
margin: const EdgeInsets.only(top: 80),
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(100),
),
),
),
Center(
child: Text(
'Hello World',
style: TextStyle(fontSize: 70, fontWeight: FontWeight.w600),
),
)
],
),
),
],
),
);
}
您不仅可以在视图上创建“洞”,而且可以与任何东西一起使用!包括文字等。
最后结果:
推荐阅读
- javascript - 在 JavaScript 中从数组初始化变量
- javascript - 使用 JavaScript 隐藏在转发器内单击的按钮
- angular - 什么时候应该在Angular中使用href而不是routerLink?
- javascript - 为不同类中的方法提供“this”上下文的最佳实践
- c# - 将配置读入基类对象集合作为子类对象
- microsoft-graph-api - 如何检测来自 GraphServiceClient SendMail 的错误
- html - IE11 flex child 不会缩小以给其他具有非包装内容的孩子留出空间
- excel - 问题在vba访问操作excel表中设置非连续范围的范围
- oauth-2.0 - 一段时间后撤销刷新令牌是否合理?
- sed - 无法在 sed 中引用捕获组