Image

Image（图片组件）是显示图像的组件，一个显示图片的widget，支持图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBM

构造方法

Image: 从ImageProvider获取数据
Image.network: 加载网络图片。
Image.asset: 加载本地图片文件。
new Image.file: 加载本地图片文件(File文件）图片。
new Image.memory: 加载Uint8List资源图片（byte数组）图片。

常用属性

fit 的属性

repeat 属性

/*
   * 基本属性 
   */

class ImageTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var imgUrl =
        "https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";

    return Container(
      // 这种通过构造方法来
      //   child: Image.network("https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg",
      //   width:  300.0, // 设置图片的宽度
      //   height: 300.0,  // 设置高度
      //   alignment: Alignment.center, // 设置对齐方式
      //   fit: BoxFit.cover,
      // ) ,

      child: Image(
        image: NetworkImage(imgUrl),  // 加载是网络图片
        width: 300.0,
        height: 900.0,
         alignment: Alignment.center, // 设置对齐方式, 跟container 里面对齐方式一样
         //如果图片没有填充满容器的话，图片的对齐方式，值为一个 AlignmentGeometry 对象，Alignment 是它的一个实现类
            //可选值同 Container 的 Alignment 取值一样。
            //Alignment.topLeft：垂直靠顶部水平靠左对齐
            //Alignment.topCenter：垂直靠顶部水平居中对齐
            //Alignment.topRight：垂直靠顶部水平靠右对齐
            //Alignment.centerLeft：垂直居中水平靠左对齐
            //Alignment.center：垂直和水平居中都对齐
            //Alignment.centerRight：垂直居中水平靠右对齐
            //Alignment.bottomLeft：垂直靠底部水平靠左对齐
            //Alignment.bottomCenter：垂直靠底部水平居中对齐
            //Alignment.bottomRight：垂直靠底部水平靠右对齐
            //除了上面的常量之外，还可以创建 Alignment 对象指定 x、y 偏移量
          fit: BoxFit.contain,  //fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来 的。 类似 Android 中 ImageView 的 scaleType    
          //BoxFit.none：将图片的内容按原大小居中显示。
            //BoxFit.contain：将图片的内容完整居中显示，通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高，类似 Android 的 centerInside。
            //BoxFit.cover：按比例放大图片的 size 居中显示，类似 Android 的 centerCrop。
            //BoxFit.fill：把图片不按比例放大/缩小到组件的大小显示，类似 Android 的 fitXY。
            //BoxFit.fitHeight：把图片的高按照组件的高显示，宽等比例放大/缩小。
            //BoxFit.fitWidth：把图片的宽按照组件的宽显示，高等比例放大/缩小。
            //BoxFit.scaleDown：如果图片宽高大于组件宽高，则让图片内容完全居中显示，此时同 contain，如果图片宽高小于组件宽高，则按图片原大小居中显示，此时同 none。

            color: Color(0xFFFFFF00),  //设置图片的颜色会覆盖 image 指定的图片，如果也设置了 colorBlendMode 属性，则会与 image 混合产生特殊效果
            colorBlendMode: BlendMode.darken,
           //  matchTextDirection: true,
             
              //如果图片没填充满容器的话，图片的重复方式，可选值有：
            //ImageRepeat.noRepeat：不重复
            //ImageRepeat.repeat：X、Y 轴都重复
            //ImageRepeat.repeatX：只在 X 轴重复
            //ImageRepeat.repeatY：只在 Y 轴重复
            repeat: ImageRepeat.repeat,
      ),
      alignment: Alignment.center,
    );
  }
}

实现圆角图片
1.方式一

/*
 * 使用裁剪来实现图片圆角
 */
class RoundedCornersImage extends StatelessWidget {
  var imgUrl =
      "https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      child: Image.network(
        imgUrl,
        scale: 8.5,
        fit: BoxFit.cover,
      ),
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        topRight: Radius.circular(20),
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
      ),
    );
  }
}

方式二

/*
 * 使用边框来实现图片圆角
 */
class RoundedCornersImage1 extends StatelessWidget {
  var imgUrl =
      "https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
  @override
  Widget build(BuildContext context) {
    return  Container(
      width: 120,
      height: 60,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(10.0),
        image: DecorationImage(image: NetworkImage(imgUrl), fit: BoxFit.cover),
      ),
    );
  }
}

效果图

image.png

实现 圆形 图片
方式一

/*
 *  使用裁剪来实现图片圆形
 */
class CircularImage extends StatelessWidget {
  var imgUrl =
      "https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Image.network(
        imgUrl,
         width: 80,
         height: 80,
        fit: BoxFit.cover,
      ),
    );
  }
}

方式二

/*
 *  使用CircleAvatar来实现圆形图片
 */
class CircularImage1 extends StatelessWidget {
  var imgUrl =
      "https://c-ssl.duitang.com/uploads/item/201703/23/20170323195929_utNKH.jpeg";
  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      backgroundImage: NetworkImage(imgUrl),
      radius: 50.0,
      
    );
  }
}

效果图

image.png

Flutter 引入本地图片

image.png

image.png

 Image.asset("images/a.jpeg", fit:BoxFit.cover
)