Fluttle Image（图片）

Image 用于展示图片的组件。

静态函数：

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

// 资源图片
new Image.asset('images/pic1.jpg'),
//网络图片
new Image.network(
    'http://img5.imgtn.bdimg.com/it/u=3201813197,2518556254&fm=26&gp=0.jpg'),
// 本地文件图片
new Image.file(new File("images/pic1.jpg")),
// Uint8List图片
new Image.memory(bytes),
//使用ImageProvider加载图片
new Image(image: new NetworkImage("http://img5.imgtn.bdimg.com/it/u=3201813197,2518556254&fm=26&gp=0.jpg"))

 

实例：

1、打开pubspec.yaml文件（设置本地图片路径）

2、在pubspec.yaml同级下建立images文件夹

3、实例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
//        appBar: AppBar(
//          title: Text("Flutter Demo"),
//        ),
        body: new Center(
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              //展示1
//              new Expanded(child: new Image.asset('images/pic1.jpg')),
//              new Expanded(flex: 2, child: new Image.asset('images/pic2.jpg')),
//              new Expanded(child: new Image.asset('images/pic3.jpg')),
//展示2:
              new Expanded(child: new Image.asset('images/pic1.jpg')),
              new Expanded(child: new Image.asset('images/pic2.jpg')),
              new Expanded(child: new Image.asset('images/pic3.jpg')),
//展示3
//              new Image.asset(
//                'images/pic1.jpg',
//                width: 100,
//              ),
//              new Image.asset(
//                'images/pic2.jpg',
//                width: 100,
//              ),
//              new Image.asset(
//                'images/pic3.jpg',
//                width: 100,
//              ),
            ],
          ),
        ),
      ),
    );
  }
}

效果：

注：Expanded 会根据图片数量的多少自动排列