Futter基础第3篇： 实现引用远程图片、本地图片、实现圆形图片，实现圆角图片【Image.network、Image.asset、BorderRadius.circular（150）】_flutter image.network 圆角

一丶 效果图

【1】引用远程图片

【2】引用本地图片

【3】实现圆形图片（方法一）、圆角图片（受弧度影响）

【4】实现圆形图片（方法二）

二丶 代码+注释

【1】引用远程图片

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterDemo'),
        ),
        body: HomeCentent(),
      ),
    );
  }
}

class HomeCentent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
          child: Image.network(                   //引入一张远程图片
            "https://www.itying.com/images/flutter/2.png",   //远程图片链接
            alignment: Alignment.topLeft,     //设置图片的方位在左上角
//            color: Colors.yellow,   //设置这张图片的颜色
//            colorBlendMode: BlendMode.luminosity, //设置颜色的混合模式

            fit:BoxFit.cover,       //设置图片的显示模式，cover—全屏显示，最常用！
//            repeat: ImageRepeat.repeatX,    //横向平铺，纵向不变
//            repeat: ImageRepeat.repeat,   //横向纵向都平铺,
          ),
          width: 300,
          height: 300,
          decoration: BoxDecoration(
              color: Colors.yellow          //设置方框背景颜色
          ),
        )
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

【2】引用本地图片
先做准备工作：（三步）
1.项目根目录下，创建Images文件夹，如下图：
2.分别创建2.0x，3.0x，4.0x并且在这些文件夹里面放图片，然后再在外面放一张图片，如图：

3.在pubspec.yaml 文件里，增加如下配置：

点击右上角 Packages get并且要Ctrl+s保存
然后就可以开始敲代码了：

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterDemo'),
        ),
        body: HomeCentent(),
      ),
    );
  }
}

class HomeCentent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: Image.asset('images/aa.png',   //导入本地图片
          fit: BoxFit.cover,
        ),
        height: 300,
        width: 300,
      )
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

【3】实现圆形图片（方法一）、圆角图片（根据弧度变化）

    return Center(
        child: Container(

          width: 300,
          height: 300,
          decoration: BoxDecoration(
            color: Colors.yellow ,         //设置方框背景颜色
//            borderRadius: BorderRadius.all(
//              Radius.circular(150)      //变成圆形，不过一般不这么实现圆形图片
//            ),
            borderRadius: BorderRadius.circular(150),       //实现圆形图片的方式一：   有些麻烦
            image: DecorationImage(
                image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
                fit: BoxFit.cover     //铺满全屏
            ),
          ),
        )
    );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

【4】实现圆形图片（方法二）：

    return Center(
        child: Container(
          child: ClipOval(    //实现圆形图片方式二，最简单的方式
            child: Image.network('https://www.itying.com/images/flutter/2.png',
              height: 100,
              width: 100,
              fit: BoxFit.cover,
            ),
          ),
        )
    );
1
2
3
4
5
6
7
8
9
10
11

三丶 知识点

图片组件是显示图像的组件，Image 组件有很多构造函数，这里我们只给大家讲两个
Image.asset， 本地图片
Image.network 远程图片

Image 组件的常用属性:

名称 						类型 								说明

alignment 					Alignment						图片的对齐方式


color 和 colorBlendMode		设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合									


fit 						BoxFit 						fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。
BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain:全图显示，显示原比例，可能会有空隙。
BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown：效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大。

repeat 						平铺 						
ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
ImageRepeat.repeatX: 横向重复，纵向不重复。
ImageRepeat.repeatY：纵向重复，横向不重复。

width 							宽度 一般结合 ClipOval 才能看到效果

height 							高度 一般结合 ClipOval 才能看到效果
更多属性参考：https://api.flutter.dev/flutter/widgets/Image-class.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25