flutter给控件设置圆角

Flutter给控件设置圆角有几种方式，可以通过裁切Widget包装，也可以通过装饰器设置

裁切控件Clip

// 圆角
new ClipRRect(
  borderRadius: BorderRadius.circular(6.0),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.redAccent,
  )
)

// 圆形
new ClipOval(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.redAccent,
  ),
)

装饰器BoxDecoration

// 圆角
DecoratedBox(
  decoration: BoxDecoration(
    border: new Border.all(color: Colors.black54, width: 0.5),
    color: Colors.greenAccent,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(12.0),
  ),
  child: Container(
    padding: EdgeInsets.all(12),
    child: Text("内容"),
  ),
)

// 圆形
DecoratedBox(
  decoration: BoxDecoration(
    border: new Border.all(color: Colors.black54, width: 0.5),
    color: Colors.greenAccent,
    shape: BoxShape.circle,
  ),
  child: Container(
    padding: EdgeInsets.all(12),
    child: Text("内容"),
  ),
)

注意：DecoratedBox与Clip控件不同，这里只进行装饰，不进行裁切，如果child的内容超出了范围，装饰器不会进行裁切，BoxDecoration通常可以用来设置边框，例如标签列表等

对于圆形头像我们也用的比较多，这里有一个圆形头像的控件，效果与BoxDecoration一致

CircleAvatar(
  radius: 100,
  backgroundImage: NetworkImage("https://flutter.io/images/intellij/hot-reload.gif"),
)