给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: <Widget>[
	      Text('我是设置透明度上面的Widget。。。。',
	        style: TextStyle(
	            color: Colors.orange,
	            fontSize: 36.0,
	            decoration: TextDecoration.underline
	        ),
	      ),
	    ],
	  )
	),
)

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

---

运行结果

Opacity完整代码