Flutter：设置图片 和 Widget 的圆形、圆角、边框

圆形

ClipOval(
  child: new Image.asset(
    "images/example.jpg",
    width: 80,
    height: 80,
    fit: BoxFit.cover,
  ),
)

圆角

通过 ClipRRect 实现

设置所有的角

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: new Image.asset(
    "images/example.jpg",
    width: 80,
    height: 80,
    fit: BoxFit.cover,
  ),
)

设置部分角为圆角

ClipRRect(
  borderRadius: BorderRadius.only(topLeft: Radius.circular(10),bottomRight: Radius.circular(5)),
  child: new Image.asset(
    "images/example.jpg",
    width: 80,
    height: 80,
    fit: BoxFit.cover,
  ),
);

通过 Card 设置

Card(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
    clipBehavior: Clip.antiAlias,
    child: new Image.asset(
      "images/example.jpg",
      width: 80,
      height: 80,
      fit: BoxFit.cover,
    ))

通过 Container 实现边框

Container(
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(4),
      border: Border.all(color: Colors.red, width: 1)),
  child: Text("通过 Container 实现边框"),
);