P08. Flutter Image图片组件的使用

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197106.html

1. 加入图片的几种方式
2. fit 属性的设置
3. 图片的混合模式
4. repeat 图片重复

我们都希望自己写的程序赏心悦目，俗话说的好一图顶千言，所以图片的运用在程序制作里至关重要。本文我们就来看一下 flutter 图片组件的使用。

加入图片的几种方式

• Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
• Image.network:网络资源图片，意思就是你需要加入一段 http://xxxx.xxx 的这样的网络路径地址。
• Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
• Image.memory: 加载 Uint8List 资源图片,这个我目前用的不是很多，所以没什么发言权。

我们现在就以加入网络图片为例子，在 Container 里加入一张图片，代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png',
              scale: 1.0,
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

这时候就可以看到图片被加入进来了，当然我们还顺便设置了容器的宽和高。

图片的使用在程序中个人觉的是非常有意思的，也能制作出很多酷炫的效果，这方面的相关属性希望大家下去多多练习。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/