创建内部带有透明孔的小部件

Posted 2023-02-23

【中文标题】创建内部带有透明孔的小部件

【英文标题】：Create widget with transparent hole inside

【发布时间】：2020-06-06 23:42:29

【问题描述】：

如何创建一个内部有透明孔的半透明背景？我尝试使用具有不同混合模式、堆栈、ClipRect、滤色器的装饰和前景装饰，但没有任何效果。我会欣赏任何想法。谢谢！

【问题讨论】：

对你有用dev.to/flutterclutter/…

【参考方案1】：

我发现“最简单”的方法是使用带有 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),
                ),
              )
            ],
          ),
        ),
      ],
    ),
  );

您不仅可以在视图上创建“洞”，而且可以与任何东西一起使用！包括文字等。

最终结果：

【讨论】：

你是个奇迹创造者。谢谢！这是在覆盖层下保持元素可见的救命稻草。

是否可以用模糊制作黑色背景？