Flutter开发之——基本组件-Image

发表于 分类于 ， ， 阅读时长 ≈ 5 分钟

一 概述

Image是Flttter中用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

二 用于显示图像的方法

2.1 构造方法

1
Image(image: ImageProvider)

2.2 静态方法

  • Image.asset - 用于从资源目录的显示图片
  • Image.network - 用于从网络上显示图片
  • Image.file - 用于从文件里显示图片
  • Image.memory - 用于从内存里（Uint8List）显示图片

三 示例

3.1 Image.asset

设置pubspec.yaml

  • 在项目路径下，新建images文件夹，并将图片flutter.png放到images路径下

  • 在pubspec.yaml 文件中添加assets，如上图，注意images的路径(间隔两个字母)

    1
    2
    3
    flutter:
      assets:
         - images/flutter.png

代码设置(lib/main.dart)

1
Image.asset("images/flutter.png"),

3.2 Image.network

1
Image.network("https://flutter.dev/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png"),

3.3 Image.file

添加path_provider依赖

在pubspec.yaml 文件中添加path_provider依赖

1
2
dependencies:
  path_provider: ^1.6.26

然后，执行Pub get获取path_provider依赖

path_provider说明

对于Android系统

1
2
3
4
5
6
7
Directory tempDir = await getTemporaryDirectory();
String tempPath = tempDir.path;

Directory appDocDir = await getApplicationDocumentsDirectory();
String appDocPath = appDocDir.path;

String storageDir = (await getExternalStorageDirectory()).path;

加载sd卡图片需要读写权限，在AndroidManifest.xml中添加

1
2
3
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.INTERNET" />

打印文件路径

1
2
3
4
5
6
7
8
Future<void> main() async {
  String appDir = (await getApplicationDocumentsDirectory()).path;
  String tempDir = (await getTemporaryDirectory()).path;
  String storageDir = (await getExternalStorageDirectory()).path;
  print("appDir==$appDir");
  print("tempDir==$tempDir");
  print("storageDir==$storageDir");
}

输出结果

1
2
3
I/flutter (10148): appDir==/data/user/0/com.example.flutter_image/app_flutter
I/flutter (10148): tempDir==/data/user/0/com.example.flutter_image/cache
I/flutter (10148): storageDir==/storage/emulated/0/Android/data/com.example.flutter_image/files

将要显示的图片导入到手机中

完整代码(lib/main.dart)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import 'dart:convert';
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
File file;
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  String _storageDir = '';
  File file;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    _getLocalFile();
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.file(File(_storageDir+"/flutter.png")),
            Image.file(File("$_storageDir/flutter.png")),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
  _getLocalFile() async {
    String appDir = (await getApplicationDocumentsDirectory()).path;
    String tempDir = (await getTemporaryDirectory()).path;
    String storageDir = (await getExternalStorageDirectory()).path;
    setState(() {
      _storageDir = storageDir;
    });
    return storageDir;
  }
}

3.4 构造方法

ImageProvider的子类有

传入AssetImage后代码为

1
Image(image: AssetImage("images/flutter.png"))

3.5 效果图

四 几个常用的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const Image({
  Key? key,
  required this.image,
  this.frameBuilder,
  this.loadingBuilder,
  this.errorBuilder,
  this.semanticLabel,
  this.excludeFromSemantics = false,
  this.width,
  this.height,
  this.color,
  this.colorBlendMode,
  this.fit,
  this.alignment = Alignment.center,
  this.repeat = ImageRepeat.noRepeat,
  this.centerSlice,
  this.matchTextDirection = false,
  this.gaplessPlayback = false,
  this.isAntiAlias = false,
  this.filterQuality = FilterQuality.low,
}) : assert(image != null),
     assert(alignment != null),
     assert(repeat != null),
     assert(filterQuality != null),
     assert(matchTextDirection != null),
     assert(isAntiAlias != null),
     super(key: key);

4.1 宽和高

1
Image(image: AssetImage("images/flutter.png"),width: 100,height: 100,),

4.2 color和colorBlendMode

color：设置图片的背景色，从Colors类中查找对应颜色

colorBlendMode：混合模式，取值BlendMode枚举类

1
Image(image: AssetImage("images/flutter.png"),color:Colors.blue,colorBlendMode: BlendMode.difference,),

4.3 fit

fit：用于设置图像在页面中的布局方式

fit 说明
BoxFit.fill 全图显示，显示可能拉伸，充满
BoxFit.contain 全图显示，显示原比例，不需充满
BoxFit.cover 显示可能拉伸，可能裁剪，充满
BoxFit.fitWidth 显示可能拉伸，可能裁剪，宽度充满
BoxFit.fitHeight 显示可能拉伸，可能裁剪，高度充满
BoxFit.none
BoxFit.scaleDown 效果和contain差不多,但是此属性不允许显示超过源图片大小，可小不可大

4.4 alignment

alignment：设置图片的对齐方式，取值Alignment类中值

4.5 repeat

repeat：设置图片是否重复，取值有：

  • ImageRepeat.repeat
  • ImageRepeat.noRepeat
  • ImageRepeat.repeatX
  • ImageRepeat.repeatY