首页 > 建站教程 > APP开发,混合APP >  Flutter圆形图片和圆角图片写法正文

Flutter圆形图片和圆角图片写法

Flutter圆形图片和圆角图片写法是转载自简书的Sky24n大神写的:

圆形头像
① ClipOval
new ClipOval(
    child: new Image.asset(Utils.getImgPath('ali_connors')),
  )
② CircleAvatar
new CircleAvatar(
    radius: 36.0,
    backgroundImage: AssetImage(
      Utils.getImgPath('ali_connors'),
    ),
  )
③ BoxDecoration BoxShape.circle
new Container(
    width: 72.0,
    height: 72.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: AssetImage(
          Utils.getImgPath('ali_connors'),
        ),
      ),
    ),
  )
圆角图片
① ClipRRect
new ClipRRect(
    borderRadius: BorderRadius.circular(6.0),
    child: new Image.asset(Utils.getImgPath('ali_connors')),
  )
② BoxDecoration BoxShape.rectangle
new Container(
    width: 88.0,
    height: 88.0,
    decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.circular(6.0),
      image: DecorationImage(
        image: AssetImage(
          Utils.getImgPath('ali_connors'),
        ),
      ),
    ),
效果图如下: