04 Flutter Image组件

Flutter Image

1、Image组件支持图片格式

支持图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBMP

2.创建Image方式

Image()	构造方法
Image.asset	加载本地资源图片
Image.file	加载本地图片
Image.network	加载网络图片
Image.memory	加载Uint8List资源图片

3.属性

1. 图片的常用属性

1. alignment 对齐方式 ；

2. color 颜色；

3. colorBlendMode 颜色混合模式。要与color一起设置才有效果；

4. fit 图片的填充方式。常用的有几下几种：

	BoxFit.fill  全图显示，图片会被拉伸，并充满父容器；

	BoxFit.contain 全图显示，显示原比例，可能会有空隙；

	BoxFit.cover 图片充满，显示可能拉伸，可能裁切，但不变形；

	BoxFit.fitWidth 宽度横向充满，显示可能拉伸， 可能裁切；

	BoxFit.fitHeight  高度竖向充满，显示可能拉 伸，可能裁切；

	BoxFit.scaleDown 效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大；

5. repeat 平铺。常用的有以下几种：

 	ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整 个画布；

	ImageRepeat.repeatX: 横向重复，纵向不重复；

 	ImageRepeat.repeatY：纵向重复，横向不重复；

6. width 宽度。一般结合 ClipOval 才能看到效果；

7. height 高度。一般结合 ClipOval 才能看到效果；

4加载本地图片

第一种方式： 注意images/ 需要加/
assets:
    - images/
第二种方式：
assets:
    - images/a.jpeg
    - images/2.0x/a.jpeg
    - images/3.0x/a.jpeg
    - images/4.0x/a.jpeg
        

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text('FlutterDemo')), body: HomeCenter()));
  }
}
class HomeCenter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.asset("images/a.jpeg",
            fit: BoxFit.cover,
            alignment: Alignment.topRight,
            repeat: ImageRepeat.repeat),
        width: 200,
        height: 300,
        color: Colors.yellow,
      ),
    );
  }
}

5.加载远程图片

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Image")),
        body: HomeCenter(),
      ),
    );
  }
}

class HomeCenter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      child: Image.network(
        "http://www.ionic.wang/statics/index/images/ionic4.png",
        // alignment: Alignment.bottomRight,

        color: Colors.blue,
        colorBlendMode: BlendMode.screen, //结合color使用，颜色混合模式

        // fit:BoxFit.cover,
        // repeat:ImageRepeat.repeat
      ),
      width: 300,
      height: 800,
      decoration: BoxDecoration(color: Colors.yellow),
    ));
  }
}

6.其他加载图片方式

Image.file/Image.memory 

7 加载SDK卡中的图片

path_provider是第三方库，在 pubspec.yaml中添加依赖：

说明：

对于android来说：
appDocDir：/data/user/0/com.example.fluttersample/app_flutter
tempDir：/data/user/0/com.example.fluttersample/cache
storageDir：/storage/emulated/0/
storageDir就是sd卡的路径,加载sd卡图片需要读写权限，在AndroidManifest.xml中添加：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Image.file(
          File('$_storageDir/1.png'),
          width: 300,
          height: 160,
        )

8 圆角图片

1.使用Container中Radius，将区域变成圆形

return Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(150),
image: DecorationImage(
image: new NetworkImage('https://www.itying.com/images/201905/thumb_img/1101_thumb_G_15578 45381862.jpg'),
fit: BoxFit.cover
)
),
),
);

2.ClipOval 实现圆角

return Center( child:Container( child:ClipOval( child:Image.network("https://www.itying.com/images/201905/ thumb_img/1101_thumb_G_1557845381862.jpg", width:150.0, height:150.0, ),
)
),
);

3.Image组件,decoration中加载图片

decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new ExactAssetImage('assets/images/time.png'),
            fit: BoxFit.cover,
          ),
        ),
   image: DecorationImage(
            image:NetworkImage("http://www.ionic.wang/statics/index/images/ionic4.png"),
            fit: BoxFit.cover
          )
        ),

——————注意：加载本地图片使用ExactAssetImage

——————网络图片：Image:NetworkImage