给Flutter中的Widget设置透明度

给Flutter中的Widget设置透明度

在项目开发中，需要经常用到透明度；比如在app中弹出一个提示框，这个时候的提示框就需要上下左右离边距有一定的距离，然后背景色舍黑色，需要设置透明度为0.4；这在app开发中是很常见的一个功能，如果在Flutter中，我们该如何做到设置透明度。

Opacity使用

在flutter中，可以使用Opacity来设置一个Widget的透明度，并且Opacity有一个child属性，可以用来放置需要展示的子Widget。

来看下Opacity的定义

const Opacity({
    Key key,
    @required this.opacity,//透明度opacity >= 0.0 && opacity <= 1.0
    this.alwaysIncludeSemantics = false,
    Widget child,
  })

里面很简单，在使用的时候只需要设置一个this.opacity和child；现在去试用一下。

Opacity演示

首先创建一个Text，展示在Opacity下方，设置完Opacity的透明度之后，验证下看看能不能看到这个Text。

Text('我是设置透明度下面的Widget。。。。',
    style: TextStyle(
      color: Colors.orange,
      fontSize: 36.0,
      decoration: TextDecoration.lineThrough,
      shadows: [
        Shadow(color: Colors.red,offset: Offset(1, 1),blurRadius: 1.9),
        Shadow(color: Colors.black,offset: Offset(0, 1),blurRadius: 1.9),
        Shadow(color: Colors.blue,offset: Offset(0.5, 0.5),blurRadius: 1.9),
      ],
    )
)

接着创建一个透明度为0.6的Opacity，并且里面包含一个展示在Opacity上面的Text。

Opacity(
    opacity: 0.6,//设置透明度
    child: Container(
      color: Colors.black,
      padding: EdgeInsets.all(16.0),
      alignment:Alignment.bottomCenter,
      child: Column(
        children: [
          Text('我是设置透明度上面的Widget。。。。',
            style: TextStyle(
                color: Colors.orange,
                fontSize: 36.0,
                decoration: TextDecoration.underline
            ),
          ),
        ],
      )
    ),
)

程序运行起来之后，就可以看到一个设置透明度的Widget就创建成功了。

---

运行结果

run.jpg

Opacity完整代码