Flutter圆角设置组件

flutter能设置圆角的组件：ClipRRect、ClipOval、CircleAvatar、BoxDecoration BorderRadius.circular、BoxDecoration BoxShape.circle

1.ClipRRect：将 child 剪裁为宽高相等的圆角组件，可设置圆角度数

  new Container(
      width: 80,//80或100
      height: 80,
         child: new ClipRRect(
              borderRadius: BorderRadius.circular(40),//圆角度数
              child: Image.network(this.imageUrl),
         ),
  ),

ClipRRect.png

2.ClipOval： 将child裁剪为宽高相等的圆角组件（只包括圆形和椭圆形），不可设置圆角度数

 new Container(
      width: 80,//80或100
      height: 80,
         child:new ClipOval(
              child: Image.network(this.imageUrl),
         ),
  ),

ClipOval.png

3.CircleAvatar：只能设置自身圆形，不能裁剪child

 new Container(
      width: 80,//80或100
      height: 80,
      child: new CircleAvatar(
           backgroundImage: NetworkImage(this.imageUrl),
      ),
),

CircleAvatar.png

4.BoxDecoration BorderRadius.circular 设置自身圆角,不能裁剪child

new Container(
    width: 80.0,//100或80
    height: 80.0,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(40),
        image: DecorationImage(
            image: NetworkImage(this.imageUrl),
         )
      ),
  ),

BorderRadius.png

4.BoxDecoration BoxShape.circle 只能设置自身为圆形，不能裁剪child

new Container(
    width:80,//80或100
    height: 80,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: NetworkImage(this.imageUrl),
      ),
    ),
  )

BoxShap.png

参考：flutter 圆角设置