Flutter的学习笔记 3

Image图片组件的使用

加入图片：

使用组件加入各种类型的图片

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

child: new Image.network(
               'https://cdn.pixabay.com/photo/2019/09/26/12/16/mountains-4505793_1280.jpg',
                  scale: 1.0,
                ),

fit属性：

设置图片的压缩和挤压，大小根据所给的容器来判定

• BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。

• BoxFit.contain:全图显示，显示原比例，可能会有空隙。

• BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。

• BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。

• BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。

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

child: new Image.network(
               'https://cdn.pixabay.com/photo/2019/09/26/12/16/mountains-4505793_1280.jpg',
                  scale: 1.0,
                  fit: BoxFit.cover,
                ),

图片的混合模式：

设置图片与颜色的叠加效果

child: new Image.network(
               'https://cdn.pixabay.com/photo/2019/09/26/12/16/mountains-4505793_1280.jpg',
                scale: 1.0,
                fit: BoxFit.cover,
                color: Colors.blue,
                colorBlendMode: BlendMode.lighten,
              ),

图片混合的类型（API）

图片重复：

设置图片在长和宽上重复使用

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

• ImageRepeat.repeatX: 横向重复，纵向不重复。

• ImageRepeat.repeatY：纵向重复，横向不重复。

child: new Image.network(
               'https://cdn.pixabay.com/photo/2019/09/26/12/16/mountains-4505793_1280.jpg',
               scale: 1.0,
               //fit: BoxFit.cover,
               repeat: ImageRepeat.repeat,
               color: Colors.blue,
               colorBlendMode: BlendMode.lighten,
             ),

end：

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
// 声明MyApp类
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Text widget',
      home: Scaffold(
        body: Center(
            child: Container(
                child: new Image.network(
                  'https://cdn.pixabay.com/photo/2019/09/26/12/16/mountains-4505793_1280.jpg',
                  scale: 1.0,
                  //fit: BoxFit.cover,
                  repeat: ImageRepeat.repeat,
                  color: Colors.blue,
                  colorBlendMode: BlendMode.lighten,
                ),
                width: 500.0,
                height: 400.0,
                color: Colors.limeAccent,
            ),
        )
      ),
    );
  }
}