Flutter基础学习 5-19 Image图片组件的使用

今天主要介绍Flutter中Image图片组件的使用.......

Demo源码：

import 'package:flutter/material.dart';
//主函数（入口函数）
void main() {
     runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个material风格的组件
    return MaterialApp(
       title: 'Welcome to Flutter',   
       //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
       home: Scaffold(                //home ： 应用默认所显示的界面 Widget
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          //body:当前界面所显示的主要内容
          body: Center(
            //Container（容器控件）,相当于HTML里的<div>标签
            child: Container(
              child: new Image.network(        //加载网络资源图片
                'https://www.baidu.com/img/dong_28db0e2033ff1faf14771bc40ad0a9cd.gif',
                //fit: BoxFit.fill,   //BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
                color: Colors.white,   //color：是要混合的颜色，如果你只设置color是没有意义的。
                colorBlendMode: BlendMode.difference,   //colorBlendMode:是混合模式，相当于我们如何混合。
                repeat: ImageRepeat.repeat,   //ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布
              ),
              width: 400.0,
              height: 200.0,
              color: Colors.lightBlue,
            ),
          ),
       ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}

需要注意的知识点：

1、加入图片的几种方式

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

我们现在就以加入网络图片为例子，在Container里加入一张图片，顺便设置了容器的宽和高。

2、fit属性的设置

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的，我们先来看看这些属性。

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

3、图片的混合模式

图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色，里边的模式非常的多，产生的效果也是非常丰富的。

color：是要混合的颜色，如果你只设置color是没有意义的。
colorBlendMode:是混合模式，相当于我们如何混合。

4、repeat图片重复

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

运行截图：

Flutter基础学习 5-19 Image图片组件的使用

猜你喜欢