flutte学习-裁剪圆角图片

Posted 2022-11-25 GY-93

flutte学习-裁剪圆角图片

• 1. Container+BoxDecoration来实现圆角
• 2. ClipOval 来实现圆角
• 3. CircleAvatar 的 backgroundImage 属性实现圆角
• 4. ClipRRect组件为图片实现圆角
• 5. Card设置圆角

1. Container+BoxDecoration来实现圆角

Container(
              width: 50.px,
              height: 50.px,
              decoration: BoxDecoration(
                image:  DecorationImage(image: NetworkImage(headimageurl)),
                borderRadius: BorderRadius.circular(25.px)
              ),
            )

2. ClipOval 来实现圆角

ClipOval(
          child: Image.network(
            headimageurl,//图片url
            width: 25.px,
            height: 25.px,
            fit: BoxFit.cover,
          ),
        )

3. CircleAvatar 的 backgroundImage 属性实现圆角

• CircleAvatar是可以实现圆角的， 但是无法控制带下， 所以需要知道图片的具体尺寸，但是这对于开发中，不容易控制的， 所以我们可以配合Container或则SizedBox作为外层容器来控制图片的大小，但是系统推荐我们使用SizedBox， 从而实现控制图片圆角的目的

            SizedBox(
              width: 25.px,
              height: 25.px,
              child: CircleAvatar(
                //当图片未加载出来时，显示的背景色
                backgroundColor: Colors.white,
                backgroundImage: NetworkImage(headimageurl) ,
                radius: 25.px / 2,
              ),
            )

4. ClipRRect组件为图片实现圆角

ClipRRect(
          child: Image.network(imageurl,width: 235.px,height: 350.px,fit: BoxFit.cover,),
          borderRadius: BorderRadius.circular(15),)

5. Card设置圆角

Card(
              child: Image.network(headimageurl, width: 50.px,height: 50.px,),
              //设置超出部分裁剪
              clipBehavior: Clip.antiAlias,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.px),
                //设置边框
                side: const BorderSide(width: 2.0),
              ),
            )