Flutter组件--Image 图片组件,圆形图片

1.属性

名称
color和colorBlendMode	设置图片的背景颜色,通常和colorBlendMode配合一起使用,这样可以是图片颜色和背景色混合.上面的图片就是进行了颜色的混合,绿色背景和图片红色的混合
fit	用来控制图片的拉伸和挤压
repeat	平铺
width	宽度 一般结合ClipOval才能看到效果
height	高度 一般结合ClipOval才能看到效果
alignment	用来控制图片摆放的位置
centerSlice	设置图片内部拉伸,相当于在图片内部设置了一个.9图,但是需要注意的是,要在显示图片的大小大于原图的情况下才可以使用这个属性,要不然会报错
matchTextDirection	需要配合Directionality进行使用
gaplessPlayback	当imageProvider发生变化的时候,重新加载图片的过程中,原图片的展示是否保留,true:保留,false不保留,直接空白等待下一张图片加载.

2.圆形图片

方式一(通过圆形容器实现圆形图片):

class Circular extends StatelessWidget {
  const Circular({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius:BorderRadius.circular(75) ,
        image: const DecorationImage(//这个image必须在decoration里面进行配置
          image:NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668234535&t=05726de3940e0b9174575881d8ea63ee")
          ,
          fit: BoxFit.cover ),
      )
    );
  }
}

方式二(通过ClipOval):

class ClipOvalApp extends StatelessWidget {
  const ClipOvalApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child:Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202102%2F28%2F20210228085905_de8f7.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668235122&t=58fee95e2c78637b486779540d0e668e",
        width: 150,
        height: 150,
        fit: BoxFit.cover,) ,
        
      ),
    );
  }
}

方式三(通过CircleAvatar):

CircleAvatar( 
                  radius: 200.0,
                   backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
                    ),

基本上，CircleAvatar 不提供设置边框的属性。但是，可以将其包裹在具有更大半径和不同背景颜色的不同 CircleAvatar 中，以创建类似于边框的内容===>也就是底部使用一个更大的圆进行包裹

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      radius: 110,
      backgroundColor: Color(0xffFDCF09),
      child: CircleAvatar(
        radius: 100,
        backgroundImage:
            NetworkImage("https://www.itying.com/images/flutter/3.png"),
      ),
    );
  }
}