Flutter基础—常用控件之图片

Image控件即图片控件，是显示图像的控件，Image控件有多种构造函数：

• new Image，用于从ImageProvider获取图像。
• new Image.asset，用于使用key从AssetBundle获取图像。
• new Image.network，用于从URL地址获取图像。
• new Image.file，用于从File获取图像。

为了自动执行像素密度感知资源分辨率，使用AssetImage指定图像，需要确保在控件树中的图片控件上方存在MaterialApp、WidgetsApp和MediaQuery控件。

下面是一个从URL地址获取图像的实例，并通过scale属性设置缩放比例：

import 'package:flutter/material.dart';
class ImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('从URL地址获取图像'),
      ),
      body: new Center(
        child: new Image.network(
          'http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg',
          scale: 2.0,
        ),
      ),
    );
  }
}
void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new ImageDemo(),
    ),
  );
}
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

下面是一个从本地文件目录中获取图像的实例：

import 'package:flutter/material.dart';

class ImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('从本地获取图像'),
      ),
      body: new Center(
        child: new Container(
          decoration: new BoxDecoration(
            backgroundImage: new BackgroundImage(
              image: new AssetImage('images/flutter.jpeg'),
            ),
          )
        )
      ),
    );
  }
}

void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new ImageDemo(),
    ),
  );
}
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

上面的代码会在一个容器里显示一张图片，但是不同的手机有不同的像素比率，这时就需要根据手机的像素比率来加载不同图片，做法很简单，只需要在图片同级目录下创建2.0x/…和3.0/…的目录就可以了。