Flutter 容器 Opacity、CircleAvatar、ClipRRect

新建项目-2.png

Opacity 透明度容器

构造函数

const Opacity({
    Key key,
    @required this.opacity,    //设置透明度 0-1之间 值越大越不透明
    this.alwaysIncludeSemantics = false, 
    Widget child,
  }) : a

列子

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
          appBar: new AppBar(title: new Text('Flutter 透明度容器 Opacity')),
          body: Opacity(
            opacity: 0.2, //设置透明度,0-1之间
            child: Text(
              'Hello Flutter',
              style: TextStyle(color: Colors.purple, fontSize: 50),
            ),
          )
      )
    );
  }
}

image.png

椭圆形

1. 构造函数

ClipOval({Key key, this.clipper,  
          this.clipBehavior = Clip.antiAlias, 
          Widget child}

2. 例子

 body: ClipOval(
    child: Image.network(
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=961039031,2726795919&fm=26&gp=0.jpg"
    )
  )

圆形头像:

image.png

CircleAvatar 圆形头像

1. 构造函数

const CircleAvatar({
    Key key,
    this.child,  //设置子widget后,图片不会根据radius的值改变,需要去设置backgroundimage
    this.backgroundColor, //背景色
    this.backgroundImage, //背景图片
    this.foregroundColor, //背景颜色
    this.radius,    //半径
    this.minRadius, 
    this.maxRadius,
  })

2. 例子

body: CircleAvatar(
  radius: 60,
  backgroundImage: NetworkImage(
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=961039031,2726795919&fm=26&gp=0.jpg"
  ),
)

image.png

const ClipRRect({
    Key key,
    this.borderRadius = BorderRadius.zero, //圆角半径
    this.clipper,                          //裁剪路径
    this.clipBehavior = Clip.antiAlias,
    Widget child,
  }) 

image.png

ClipRRect 圆角矩形裁剪

1. 构造函数

const ClipRRect({
    Key key,
    this.borderRadius = BorderRadius.zero, //圆角半径
    this.clipper,                          //裁剪路径
    this.clipBehavior = Clip.antiAlias,
    Widget child,
  }) 

2. 列子

//圆角无边框
body: ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Container(
    width: 100,height: 100,
    child: Image.network(
      "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=961039031,2726795919&fm=26&gp=0.jpg",
    ),
  ),

image.png

 ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Container(
    color: Colors.red,
    padding: EdgeInsets.all(5),
    width: 100, height: 100,
    child: ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: Image.network("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=961039031,2726795919&fm=26&gp=0.jpg",),
    )
  ),
)

image.png