flutter中如何显示圆角图片(rounded corners image)?

码云
2020-11-08 12:45

flutter中显示圆角图片有几种方式,实现代码如下:

//使用ClipRRect
ClipRRect(
    borderRadius: BorderRadius.circular(8.0), //8像素的圆角
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)

//使用CircleAvatar
CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

//使用ClipOval
ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),

//使用Container搭配BoxDecoration
Container(
  width: 100.0,
  height: 150.0,
  decoration: BoxDecoration(
    image: DecorationImage(
        fit: BoxFit.cover, image: NetworkImage('Path to your image')),
    borderRadius: BorderRadius.all(Radius.circular(8.0)),
    color: Colors.redAccent,
  ),
),

 

全部评论