flutter-加载图片的方式

flutter一般分为两种图片加载的方式：网络加载和本地加载
首先看一下image的一些属性：

const Image({
  ...
  this.width, //图片的宽
  this.height, //图片高度
  this.color, //图片的混合色值
  this.colorBlendMode, //混合模式
  this.fit,//缩放模式
  this.alignment = Alignment.center, //对齐方式
  this.repeat = ImageRepeat.noRepeat, //重复方式
  ...
})

width、height：指图片的宽和高
color，colorBlendMode：color指定混合色，而colorBlendMode指定混合模式，图片绘制时可以对每一个像素进行颜色混合处理
fit：指图片的各种充满（各种样式）
repeat：当图片本身大小小于显示空间时，指定图片的重复规则。
1，网络加载：网络加载一般很简单（直接上代码）

class MyImageBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network("https://..",//网络图片的地址
          alignment: Alignment.topCenter,
          repeat: ImageRepeat.repeatY,
          colorBlendMode: BlendMode.colorDodge,
          fit: BoxFit.cover,),
        width: 200,
        height: 150,

        color: Colors.blue,
      ),
    );
  }

Container：这里相当于一个View容器

2，本地图片，需要配置本地的图片
新建一个存放图片的文件如图：（可以自己取名）

再设置：

按照步骤设置，然后直接在本地取图片：

//本地widget
class MyImageAssetBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
       width: 200,
        height: 150,
        child: Image.asset("assets/image/icon_one.jpg"),
      ),

    );
  }

}

本地是： Image.asset(）网络是 Image.network(）。各种样式可以自行设置。

3，很多地方用到圆型图片。也看看圆型的图片怎么弄。
一：CircleAvatar圆型图片
属性：

const CircleAvatar({
  Key key,
  this.child, // 子Widget
  this.backgroundColor, // 背景颜色
  this.backgroundImage, // 背景图像
  this.foregroundColor, // 前景颜色
  this.radius, // 半径
  this.minRadius, // 最小半径
  this.maxRadius, // 最大半径
})

加载：

class MyCircleBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleAvatar(
        radius: 100,
        backgroundImage: NetworkImage("https://.."),//图片链接
      ),
    );
  }
}

二：ClipOval也可加载圆型图片

class MyClipOvalBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child: Image.network(
          "https://...",//网络图片
          width: 100,
          height: 100,
        ),
      ),
    );
  }
}

圆的图片大概都可以这样用，还有一些图片设置圆角的

4，图片圆角
ClipRRect实现图片圆角：

class  MyClipRRectBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Image.network(
          "https://...",//图片链接
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

还有一个方式BoxDecoration，涉及到我们视图的边框、圆角、阴影、形状、渐变、背景图像等，下章会具体的介绍