Flutter开发上手，Image 初级应用

在Flutter 开发中，通过 Image 来展示图片，图片的数据来源可以是本地文件，也可以来自网络。今天就来看一看，图片的展示需要几步。

第一步，在 pubspec.yaml 中引入图片展示的库文件

dependencies:
  cupertino_icons: ^1.0.3

备注：库文件最新版的获取路径为：https://pub.dev/packages/cupertino_icons
把后面的库名替换一下，即可获取最新版的库文件版本；

第二步，本地图片资源的引入

# 本地文件资源的引入
flutter:
  assets:
    # 对图片路径的声明
    - images/

备注：可以声明多个图片路径，也可声明一个图片文件夹。
记得在项目根目录下创建images文件夹。

第三步，图片展示Demo

import 'package:flutter/material.dart';
class ImageRoute extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // 使用图片，本地图片
    var img = AssetImage("images/aaa.jpg");
   // icons文件
    String icons = "";
    icons += "\uE914";
    icons += " \uE000";
    icons += " \uE90D";

    return SingleChildScrollView(
      child: Column(
          children: <Widget>[
            // 最原始的图片，宽度、高度等其他参数都不限制
            Image(
              image: img,
            ),
            // 指定图片尺寸，超出部分进行压缩，被压缩的部分会变形
            // Image(
            //   image: img,
            //   height: 50.0,
            //   width: 100.0,
            //   fit: BoxFit.fill, // 拉伸填充满显示空间
            // ),
            // 指定图片尺寸，保证图片长宽比不变,以适应当前显示空间,不会变形
            Image(
              image: img,
              height: 50,
              width: 50.0,
              fit: BoxFit.contain, // 默认适应规则
            ),
            // 会按图片的长宽比放大后居中填满显示空间,超出部分裁减
            // Image(
            //   image: img,
            //   width: 100.0,
            //   height: 50.0,
            //   fit: BoxFit.cover,
            // ),
            // 以宽度为基准进行缩放，长宽比不变，不会变形,超出部分被裁减
            // Image(
            //   image: img,
            //   width: 100.0,
            //   height: 50.0,
            //   fit: BoxFit.fitWidth, // 同 fitHeight
            // ),
            // 和BoxFit.contain类似
            // Image(
            //   image: img,
            //   width: 100.0,
            //   height: 50.0,
            //   fit: BoxFit.scaleDown,
            // ),
            // 图片没有适应策略,图片比空间大，则只显示图片中间部分，超出部分被裁减
            // Image(
            //   image: img,
            //   height: 50.0,
            //   width: 100.0,
            //   fit: BoxFit.none,
            // ),
            // 给图片加特殊效果
            Image(
              image: img,
              width: 100.0,
              //给图片加颜色：蓝色
              color: Colors.blue,
              // 颜色混合模式
              colorBlendMode: BlendMode.difference,
              fit: BoxFit.fill,
            ),
            // Image(
            //   image: img,
            //   width: 100.0,
            //   height: 200.0,
            //   // 图片高度不够时，Y轴方向重复展示
            //   repeat: ImageRepeat.repeatY ,
            // ),
            // 网络图片的加载的两种方式
            // Image(
            //   image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
            // ),
            // Image.network(
            //   "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg",
            //   width: 100.0,
            // ),
            Text(icons,
              style: TextStyle(
                  fontFamily: "MaterialIcons",
                  fontSize: 24.0,
                  color: Colors.green
              ),
            ),
          ]
              .map((e){
            return Row(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: SizedBox(
                    width: 100,
                    child: e,
                  ),
                ),
                // Text(e.fit.toString())
              ],
            );
          }).toList()
      ),
    );
  }
}

备注：该示例中，展示了两种来源的图片，一个是本地图片，一个是网络图片，还有icons 特殊图标的展示。
Image类中有一个必选参数 image，它对应 ImageProvider 类，通过该类中load加载图片资源。

最后，加入主程序的body里，看看运行效果

import 'package:flutter/material.dart';
import 'CustomWidgetRoute.dart';
import 'ImageRoute.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: Scaffold(
        appBar: AppBar(
          title: Text("welocom to flutter"),
        ),
        body: ImageRoute(),
      ),
    );
  }
}

aaa.jpg图片 运行结果图