第11章组件装饰和视觉效果-Opacity不透明度处理

最新推荐文章于 2024-10-09 21:35:42 发布

原创最新推荐文章于 2024-10-09 21:35:42 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

97 篇文章

订阅专栏

本文展示了一个使用Flutter实现的Opacity不透明度示例，通过调整Opacity组件的opacity属性，可以改变其子组件的透明度，示例中将不透明度设置为0.3，使黑色背景呈现半透明效果。

防采集标记：亢少军老师的课程和资料

import 'package:flutter/material.dart';

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

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

Flutter技术入门与实战: http://product.dangdang.com/26485813.html
Flutter交流学习群：894109159
Flutter开源项目请关注: https://github.com/kangshaojun
Flutter视频教程：https://edu.youkuaiyun.com/lecturer/2436

@作者: 亢少军