创建内部具有透明孔的小部件 [英] Create widget with transparent hole inside

问题描述

如何创建一个半透明的背景并在其中设置透明孔?我尝试将装饰和前景装饰与不同的混合模式，堆栈，ClipRect，滤色器一起使用，但没有任何效果.我将不胜感激任何想法.谢谢！

How can I create a semi-transparent background with the transparent hole inside? I tried to use decoration and foreground decorations with different blend modes, stack, ClipRect, colorfilters, but nothing works. I will appreciate any ideas. Thanks!

推荐答案

我发现做到这一点的最简单"方法是将 ColorFiltered Widget 与 Stack 一起使用>.

The "easiest" way I've found to do it is using a ColorFiltered Widget with a Stack.

以下代码将完全满足您的需求:

The following code will create exactly what you need:

@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),
                ),
              )
            ],
          ),
        ),
      ],
    ),
  );
}

您不仅可以在视图上创建孔"，还可以使用任何东西！包括文字等.

This one you not only create "holes" over views, it works with anything! including texts, etc.

最终结果:

这篇关于创建内部具有透明孔的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！