新建項(xiàng)目-2.png

Opacity 透明度容器

構(gòu)造函數(shù)

const Opacity({
    Key key,
    @required this.opacity,    //設(shè)置透明度 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, //設(shè)置透明度,0-1之間
            child: Text(
              'Hello Flutter',
              style: TextStyle(color: Colors.purple, fontSize: 50),
            ),
          )
      )
    );
  }
}

image.png

橢圓形

1. 構(gòu)造函數(shù)

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. 構(gòu)造函數(shù)

const CircleAvatar({
    Key key,
    this.child,  //設(shè)置子widget后,圖片不會(huì)根據(jù)radius的值改變,需要去設(shè)置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. 構(gòu)造函數(shù)

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

2. 列子

//圓角無(wú)邊框
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