1. 图片的常用属性

1. alignment 对齐方式 。值为Alignment类型，如：Alignment.topCenter；

2. color 颜色。值为Colors类型，如：Colors.red；

3. colorBlendMode 颜色混合模式。要与color一起设置才有效果，值为BlendMode类型，如：BlendMode.darken；

4. fit 图片的填充方式。值为BoxFit类型，常用的有几下几种：

(1). BoxFit.fill  全图显示，图片会被拉伸，并充满父容器；

(2). BoxFit.contain 全图显示，显示原比例，可能会有空隙；

(3). BoxFit.cover 图片充满，显示可能拉伸，可能裁切，但不变形；

(4). BoxFit.fitWidth 宽度横向充满，显示可能拉伸， 可能裁切；

(5). BoxFit.fitHeight  高度竖向充满，显示可能拉 伸，可能裁切；

(6). BoxFit.scaleDown 效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大；

5. repeat 平铺。值为ImageRepeat类型，常用的有以下几种：

(1). ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整 个画布；

(2). ImageRepeat.repeatX: 横向重复，纵向不重复；

(3). ImageRepeat.repeatY：纵向重复，横向不重复；

6. width 宽度。一般结合 ClipOval 才能看到效果；

7. height 高度。一般结合 ClipOval 才能看到效果；

2. 加载远程图片

使用 Image.network() 来加载远程图片。

代码如下所示：

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主题
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 添加网络远程图片
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Container(
                // 将图片作为子元素
                child:Image.network(
                    "http://www.ionic.wang/statics/index/images/ionic4.png",
                    // 对齐方式
                    alignment: Alignment.topCenter,

                    // 图片颜色混合
                    color:Colors.purple,
                    colorBlendMode:BlendMode.darken,

                    // 图片填充方式
                    fit:BoxFit.fitHeight,

                    // 重复-指定重复方向
                    // repeat: ImageRepeat.repeatY,
                ),

                // 宽度
                width:400,
                // 高度
                height:400,
                // 容器装饰
                decoration:BoxDecoration(
                    // 颜色
                    color:Colors.yellow,
                    // 倒圆角
                    borderRadius: BorderRadius.all(
                        Radius.circular(50)
                    )
                ),
            )
        );
    }
}

效果图如下：

上面图片的颜色看起来有点怪怪的，就是用了颜色混合的效果。

3. 加载本地图片

使用 Image.asset() 加载本地图片。

加载本地图片要复杂一些，分为以下几步：

1. 在项目的根目录下添加images文件夹，放置需要加载的默认图片在里面。为了适配不同分辨率的图片，新建2.x与3.x的文件夹，放置2倍像素与3倍像素的图片。如果有必要，4倍像素的图片也加睛，但2倍像素与3倍像素的图片是必须的；

2. 在pubspec.yaml里配置图片的加载地址；

代码如下所示：

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主题
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 加载本地图片
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Container(

                // 在图片文件夹中放置图片，2.x与3.x的都要有
                // 配置pubspec.yaml

                // 添加本地图片
                child:Image.asset("images/a.jpeg"),
                height:500,
                width:300,
            )
        );
    }
}

效果图如下：

4. 开发圆形图片效果

圆形图片是开发中经常会遇到的一种效果，多用于用户头像。

1. 添加图片在容器中，给容器倒圆角；

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主题
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// 把图片做为背景，制作一个圆形图
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Container(
                // 宽度
                width:400,
                // 高度
                height:400,
                // 容器装饰
                decoration:BoxDecoration(
                    // 颜色
                    color:Colors.yellow,
                    // 另一种倒圆角的方式
                    borderRadius:BorderRadius.circular(200),
                    // 将图片作为背景,结合倒圆角实现圆形图片
                    image: DecorationImage(
                        image:NetworkImage("http://www.ionic.wang/statics/index/images/ionic4.png"),
                        fit:BoxFit.cover
                    )
                ),
            )
        );
    }
}

效果图如下： 

2. 用Flutter提供的特定组件ClipOval；

代码如下所示：

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}
// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主题
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}


// 制作圆形图的另一种方式
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Container(
                // 倒圆角50%
                child:ClipOval(
                    child:Image.network(
                        "http://www.ionic.wang/statics/index/images/ionic4.png",
                        height:200,
                        width:200,
                        fit:BoxFit.cover
                    ),
                ) 
            )
        );
    }
}

效果图如下：