flutter图片切圆角常用的几种方式

83 阅读1分钟

1.使用ClipRRect

   ClipRRect(
       borderRadius: BorderRadius.circular(19),
       child: Image.network(
         'https://img0.baidu.com/it/u=2552791859,3777891909&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          width: 38, height: 38,
          fit: BoxFit.cover,
        )
    )

2.使用ClipOval

   ClipOval( 
      child: Image.network( 
         'https://img0.baidu.com/it/u=2552791859,3777891909&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', 
          width: 38, height: 38, 
          fit: BoxFit.cover,
      ) 
    )

3.使用CircleAvatar 的 backgroundImage 属性

 CircleAvatar(
   radius: 19,
   backgroundColor: Colors.white, 
   backgroundImage: NetworkImage(
      'https://img0.baidu.com/it/u=2552791859,3777891909&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
   )
 )

4.使用Container裁剪

  Container(
    width: 38,
    height: 38,
    //超出部分,裁剪掉
    clipBehavior: Clip.hardEdge,
    decoration: BoxDecoration(
       borderRadius: BorderRadius.circular(19),
    ),
    child: Image.network(
      'https://img0.baidu.com/it/u=2552791859,3777891909&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      fit: BoxFit.cover,
    ),
  )

以上常用的几种图片切圆角方法


每天记录一点点,...