Flutter 透明度处理

Flutter 透明度处理（Opacity），Opacity组件里有一个opacity属性，能调整子组件的不透明度，使子组件部分透明，不透明度的值从0.0到1.0之间，0.0表示完全透明，1.0表示完全不透明。这样就可以根据需要做出半透明或者毛玻璃的效果。很多应用做成半透明形式，效果会更好。

Opacity组件的主要属性如下所示：

接下来编写一个例子，添加一个容器，外围放一个Opacity组件包装，不透明度值设置为0.3，容器加了一个纯黑的底色，主要是为了演示不透明度值对它的显示影响程度，当设置了0.3以后，容器变成了灰色。

完整的示例代码如下：

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Opacity不透明度示例'),
      ),
      body: Center(
        child: Opacity(
          opacity: 0.3, //不透明度值设置为0.3
          child: Container(
              width: 250.0,
              height: 100.0,
              // 添加装饰器
              decoration: BoxDecoration(
                color: Colors.black, //背景色设置为纯黑
              ),
              child: Text(
                '不透明度为0.3',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 28.0,
                ),
              ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      title: 'Opacity不透明度示例',
      home: LayoutDemo(),
    ),
  );
}

上述示例代码的运行效果大致如图所示：

酷客教程相关文章：

• Flutter 按宽高自动换行布局
• Flutter 控制是否显示组件
• Flutter 基准线布局
• Flutter 矩阵转换