Flutter开发（四）——Image Widget控件

Image

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Hello",
      home: Scaffold(
        appBar: AppBar(
          title: Text("AppBar Hello")
        ),
        body: Center(
          child: new Image.network(
            "https://profile.csdnimg.cn/2/0/1/1_redkeyer",  //图片Url地址
            width: 100, //图片宽度
            height: 850,  //图片高度
            // fit: BoxFit.fitHeight,  //以高度优先，图片缩小
            fit: BoxFit.fitWidth, //以宽度优先，图片缩小
            // fit: BoxFit.fill,   //填充，图像变形
            // fit: BoxFit.cover, //图片不变形，裁剪填充
            // fit: BoxFit.scaleDown, //图片不变形

            // repeat: ImageRepeat.repeatY,  //有容器包裹时生效

            // 图片混合模式 color 和 colorBlendMode 一起使用,可以使图片偏向某种颜色或效果
            color: Color.fromARGB(100, 100, 200, 100),
            colorBlendMode: BlendMode.hardLight //模式太多了
          )
          
        ),
      ),

    );
  }
}

效果展示：（网络图片）

//----------------------------------------------------
上面展示的Image的一些属性和加载网络图片。Flutter加载本地图片，需要进行下配置，以下进行介绍：
1、在项目根目录创建文件夹 image_resorl(这里命名随便，一般写作images)，并将要展示的图片拷贝到这个文件夹；
2、在项目根目录打开文件 flutter_app.iml，并在其中添加本地图片路径：

  assets:
    - image_resorl/wangciwang.jpeg

3、代码中用 Image.asset（‘本地图片路径’），展示本地图片。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hello",
      home: Scaffold(
        appBar: AppBar(title: Text("AppBar Hello")),
        body: Center(
          child: new Image.asset(
            'image_resorl/wangciwang.jpeg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

展示效果：（展示 本地图片）