Flutter学习：图片组件Image、 本地图片、远程图片、图片剪裁

一.复习上一节

Container 容器

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      width: 300.0,
      height: 300.0,
      color: Colors.red,
    ));
  }
}

二.远程图片加载 Image.network

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      child: Image.network(
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586601754769&di=ee49c36d3bc6e3f34ec66ba1f7b32490&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg",
        alignment: Alignment.topLeft,
        color: Colors.yellow,
        colorBlendMode: BlendMode.screen,
        fit: BoxFit.cover,
        repeat: ImageRepeat.repeatX,
      ),
      width: 300.0,
      height: 300.0,
      color: Colors.red,
    ));
  }
}

图片组件有很多命名构造函数，常用两种

Image.asset 加载本地图片
Image.network 加载远程图片 主要属性如下

• alignment ：图片的对齐方式
• color：设置图片的背景色通常和colorBlendMode配合使用进行颜色混合
• colorBlendMode：把图片颜色和背景色进行混合
• fit：BoxFit根据父容器拉伸或者压缩

• fill：充满父容器图片会被拉伸
• contain：显示原比例，可能会有空隙
• cover：图片充满整个屏幕还不变形，可能拉伸肯、剪裁、充满（常用）

• repeat ：纵向重复或横向重复

• width：一般结合ClipOval使用才能看到效果

• height：一般结合ClipOval使用才能看到效果

• 效果图

image.png

三.实现圆角图片

• 方法一：利用decoration BoxDecoration属性中的Image属性+borderRadius 属性

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              image: NetworkImage(
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586601754769&di=ee49c36d3bc6e3f34ec66ba1f7b32490&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg")),
          borderRadius: BorderRadius.all(Radius.circular(100))),
      width: 300.0,
      height: 300.0,
    ));
  }
}

• 方法二：使用 ClipOval组件

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      child: ClipOval(
        child: Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586601754769&di=ee49c36d3bc6e3f34ec66ba1f7b32490&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg",
          width: 200,
          height: 200,
        ),
      ),
      width: 300.0,
      height: 300.0,
      color: Colors.yellow,
    ));
  }
}

无论什么图片都能给你处理成不变形的圆角图片

• 效果图：

  
  
  image.png

四.引入本地图片（很麻烦）

• 1.在根目录创建images文件夹

其中放入2.0x、 3.0x、4.0x、文件包里面放入相应的图片，flutter 根据不同的手机分辨率加载不同包下的图片文件，2X 3X 是必须有的

image.png

• 2.在pubspec.yaml中引入图片

flutter:

  uses-material-design: true
  asstets:
    - images/bg_empty_data_view.png

项目中要用到的图片都需要引入，有空格该去掉的时候要去掉有可能有错误

• 3. 使用图片 Image.asset

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      child: ClipOval(
        child: Image.asset(
          "images/bg_empty_data_view.png",
          width: 200,
          height: 200,
        ),
      ),
      width: 300.0,
      height: 300.0,
      color: Colors.yellow,
    ));
  }
}

每次新添加完图片可能会显现不出来需要重新运行,建议图片用远程的

• 效果图

image.png

总结

1. 图片剪裁两种方式

(1).利用BoxDecoration中的image+ borderRadius属性
(2).利用ClipOval属性

2.加载远程图片

Image.network()

3.加载本地图片

(1).创建images文件包
(2).pubspec.yaml引入图片
(3).使用图片

Image.asset()