Flutter - Image（3）

Simulator Screen Shot - iPhone SE (2nd generation) - 2020-05-11 at 21.36.33.png

import 'package:flutter/material.dart';

void main () {
  runApp(myApp()); // 主入口
}

class myApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title:'Image Widget', 
      // 脚手架
      home:Scaffold( 
        body: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                child : Image(
                  image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589213548672&di=e5b5d87229630f4d71d6e9bee598ae82&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D3984473917%2C238095211%26fm%3D214%26gp%3D0.jpg"),
                  fit: BoxFit.fill, // 图片拉升
                  repeat: ImageRepeat.repeat, // 重复图片
                  ), 
                  width: 500,
                  height: 100,// 网络图片 
                ),
              ),


            Expanded(
              child: Image(
                image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589213548672&di=e5b5d87229630f4d71d6e9bee598ae82&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D3984473917%2C238095211%26fm%3D214%26gp%3D0.jpg"),
                fit: BoxFit.fitHeight, // 图片拉升
                width: 500,
                height: 100,
                ), // 网络图片 
              ),

            Expanded(
              child: Image(
                image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589213548672&di=e5b5d87229630f4d71d6e9bee598ae82&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D3984473917%2C238095211%26fm%3D214%26gp%3D0.jpg"),
                width: 500,
                height: 100,
                
                color: Colors.blue,
                colorBlendMode: BlendMode.multiply,   // 混合颜色-配合上面颜色的
                ), // 网络图片 
              ),
          ],
        ),
      )
    );
  }
}

是我学习的第三个组件，记录一下吧

image 展示的图片

例：image: NetworkImage("https://www.baidu.com/img/bd_logo1.png"), // 展示网络图片

Image.asset:   加载资源图片       不支持 热加载  (使用多)
Image.file:    加载本地图片   （多）
Image.network: 加载网络图片 （极多）
Image.memory:  加载Uint8List资源图片 （少）

semanticLabel 图像的语义描述。

excludeFromSemantics 默认false 是否启用图像的语义描述

width - height 宽 - 高

例：
width: 500,  // 宽度
height: 400, // 高度

fit 图片拉伸格式

例如：fit: BoxFit.contain, // 拉伸格式

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

repeat 平铺

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

centerSlice 设定拉伸部位，不能和fit一同使用

图片大于等于容器时属性无效

matchTextDirection 默认false

官方翻译：是否在TextDirection的方向上绘制图像。

gaplessPlayback 默认false

官方翻译：当图像提供者发生变化时，是继续显示旧图像，默认不显示！

filterQuality 默认FilterQuality.low

官方翻译：图像过滤器的质量级别。(渲染模式的质量)

最后编辑于：2020.05.11 22:46:07