Flutter Image

✨✨✨✨✨ 魏什么_多喝水 Flutter 之路

语雀

用于图片显示的Widget，常用类别：

1. Image.asset 资源图片

Image.asset(
    String name, {        //
    Key key,
    AssetBundle bundle,   //? 
    this.frameBuilder,    //?
    this.semanticLabel,   //语义标签
    this.excludeFromSemantics = false, //是否排除此图像.  (在应用中无贡献的图像)
    double scale,         // 图形显示的比例 .  图片显示 宽高 = 图片原图宽高/scale
    this.width,           // 宽度，如果为null的话，则图像将选择最佳大小显示，而且会保留其固有宽高比的大小
    this.height,          // 高度，如果为null的话，则图像将选择最佳大小显示，而且会保留其固有宽高比的大小
    this.color,           // 图片的混合色值 
    this.colorBlendMode,  // 图片与颜色的混合模式 
    this.fit,             // 用于在图片的显示空间和图片本身大小不同时指定图片的适应模式
    this.alignment = Alignment.center,  //图片的对齐方式
    this.repeat = ImageRepeat.noRepeat, //当图片本身大小小于显示空间时，指定图片的重复规则
    this.centerSlice,     //通过rect确定图片的四个角的大小，这四个角保持不变，其余部位拉伸，直至填满整个控件
    this.matchTextDirection = false, //图片的绘制方向  true:从左往右  false:从右往左
    this.gaplessPlayback = false,    //当图像提供者更改时  true：继续显示旧图像  false：简单地显示任何内容
    String package,       
    this.filterQuality = FilterQuality.low, //设置图片的过滤质量
    int cacheWidth,
    int cacheHeight,
  })

1. 在 Flutter 工程的根目录下创建一个 image 目录，然后将一张 flutter.jpg 的图片拷贝到该目录，如下图：

image.png

2. 打开 pubspec.yml ,在 flutter 中添加图片的配置信息:

image.png

这样就可以添加 image 文件下的所有图片.如果想导入单张 后面加图片名字 ...

3. Packages get 下

修改完pubspec.yaml的assets后都需要重新获取下

image.png

4. 使用 普通显示

//图片保持比例，按原图大小显示，如果宽高任何一个超出了屏幕宽高，
//则将超出屏幕的那个宽高设定为屏幕宽高，如果都超出了，
//那么图片将尽可能大的在屏幕范围内按照原比例显示，
//也就是图片显示的宽为屏幕宽（高按比例）或高为屏幕高（宽按比例）。

//在图片可显示的尺寸内，图片居中，保持原比例显示

Image.asset("image/flutter1.png"),
image.png

5. width、height 宽高

//指定图片显示范围 width 和height
//图片保持比例显示，尽量按原图大小显示，如果宽高任何一个超出了给定宽高，
//则将超出给定宽高的那个宽高设定为给定宽高，
//如果都超出了，那么图片将尽可能大的在给定范围内按照原比例显示，也就是图片显示的宽为给定宽（高按比例）或高为给定高（宽按比例）。
//在图片可显示的尺寸内，图片居中，保持原比例显示

Image.asset(
  "image/flutter1.png",
  width: 300,
  height: 300,
),

6. scale 比例

图片显示 宽高 = 图片原图宽高/scale

Image.asset(
  "image/flutter1.png",
  scale: 0.5, //扩大一倍
),
image.png
Image.asset(
  "image/flutter1.png",
  scale: 2, //缩小一倍
),
image.png

7. BlendMode混合模式详解

Flutter BlendMode混合模式详解

8. fit 图片在容器中显示的适应模式

原始图 : 在容器里面加了一个图片,给容器加上背景

 Container(
  width: 300,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
  ),
),
image.png

1. BoxFit.fill: 会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。

官方图:

 ![image](https://upload-images.jianshu.io/upload_images/1503437-acf335821a255bf8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

荔枝:

 Container(
  width: 300,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    fit: BoxFit.fill,  
  ),
),
image.png

2. BoxFit.contain： 会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁

官方图:

image

例子:

Container(
  width: 300,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    fit: BoxFit.contain,
  ),
),
image.png

3. BoxFit.cover ： 这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。

官方图:

image

例子:

Container(
  width: 300,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    fit: BoxFit.cover,
  ),
),
image.png

4. BoxFit.fitWidth ： 图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。

官方图:

image

列子:

 Container(
  width: 300,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    fit: BoxFit.fitWidth,
  ),
),
image.png

5. BoxFit.fitHeight ： 图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。

官方图:

image

例子:

Container(
  width: 300,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    fit: BoxFit.fitHeight,
  ),
),
image.png

6. BoxFit.none ： 图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分

官方图:

image

例子:

 Container(
  width: 300,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    fit: BoxFit.none,
  ),
),
image.png

7. BoxFit.scaleDown: 对齐目标框内的源（默认情况下，居中），并在必要时缩小源以确保源适合框内。这与contains相同，如果这会缩小图像，否则它与none相同。

官方图:

image

例子:

 Container(
  width: 200,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    fit: BoxFit.scaleDown,
  ),
),
image.png

9. alignment 图片对齐方式

1. Alignment.topLeft 左上对齐

Container(
  width: 400,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.topLeft,
  ),
),
image.png

2. Alignment.topCenter 上部居中对齐

 Container(
  width: 400,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.topCenter,
  ),
),
image.png

3. Alignment.topRight 右上对齐

 Container(
         width: 400,
              height: 350,
              color: Colors.lightGreenAccent,
              child: Image.asset(
                "image/flutter1.png",
                alignment: Alignment.topRight,
              ),
            ),
image.png

4. Alignment.centerLeft 中间居左对齐

Container(
  width: 400,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.centerLeft,
  ),
),
image.png

5. Alignment.center 中间对齐

 Container(
  width: 400,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.center,
  ),
),
image.png

6. Alignment.centerRight 中间居右对齐

Container(
  width: 400,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.centerRight,
  ),
),

image.png

7. Alignment.bottomLeft 左下对齐

Container(
  width: 400,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.bottomLeft,
  ),
),
image.png

8. Alignment.bottomCenter 底部居中对齐

 Container(
  width: 400,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.bottomCenter,
  ),
),
image.png

9. Alignment.bottomRight 右下对齐

Container(
  width: 400,
  height: 350,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.bottomRight,
  ),
),
image.png

10. Alignment.lerp(Alignment.topLeft, Alignment.topRight, t) 线性取值，t在0-1之间，t越小越倾向于左侧的值，t越大越倾向于右边的值

Container(
  width: 300,
  height: 200,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.25),
  ),
),
Container(
  width: 300,
  height: 200,
  color: Colors.redAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.5),
  ),
),
Container(
  width: 300,
  height: 200,
  color: Colors.orangeAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.lerp(Alignment.topLeft, Alignment.topRight, 0.75),
  ),
),
image.png
 Container(
  width: 200,
  height: 250,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.lerp(Alignment.topLeft, Alignment.bottomLeft, 0.25),
  ),
),
Container(
  width: 200,
  height: 250,
  color: Colors.redAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.lerp(Alignment.topLeft, Alignment.bottomLeft, 0.5),
  ),
),
Container(
  width: 200,
  height: 250,
  color: Colors.orangeAccent,
  child: Image.asset(
    "image/flutter1.png",
    alignment: Alignment.lerp(Alignment.topLeft, Alignment.bottomLeft, 0.75),
  ),
),
image.png

10. repeat 当图片本身大小小于显示空间时，指定图片的重复规则

1. ImageRepeat.repeat 在x和y轴上重复图像，直到填充满空间。

Container(
  width: 400,
  height: 600,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    repeat: ImageRepeat.repeat,
  ),
),

image.png

2. ImageRepeat.repeatX 在x轴上重复图像，直到填充满空间。


Container(
  width: 400,
  height: 400,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    repeat: ImageRepeat.repeatX,
  ),
),
image.png

3. ImageRepeat.repeatY 在y轴上重复图像，直到填充满空间

 Container(
  width: 400,
  height: 600,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    repeat: ImageRepeat.repeatY,
  ),
),
image.png

4. ImageRepeat.noRepeat 不重复

 Container(
  width: 400,
  height: 400,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    repeat: ImageRepeat.noRepeat,
  ),
),
image.png

11. centerSlice 通过rect确定图片的四个角的大小，这四个角保持不变，其余部位拉伸，直至填满整个控件

Container(
  width: 300,
  height: 300,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
    centerSlice: Rect.fromLTRB(70, 70, 160, 160),
  ),
),
Text(
  "原图",
  style: TextStyle(
    color: Colors.redAccent
  ),
),
Container(
  width: 300,
  height: 300,
  color: Colors.lightGreenAccent,
  child: Image.asset(
    "image/flutter1.png",
  ),
),
image.png

对比原图,四角没有被拉伸,中间拉伸了,一般这个属性是聊天汽包用.

12. filterQuality 设置图片的过滤质量

名称 含义
FilterQuality.none 最快的过滤
FilterQuality.low 比none的过滤质量好，但是比none的时间要长。
FilterQuality.medium 比low的过滤质量好，但是也比low的时间要长
FilterQuality.high 过滤质量最高，但也最慢

2. Image.network 网络图片

Container(
  width: 300,
  height: 300,
  color: Colors.lightGreenAccent,
  child: Image.network(
      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557781801455&di=17f9f2fc3ded4efb7214d2d8314e8426&imgtype=0&src=http%3A%2F%2Fimg2.mukewang.com%2F5b4c075b000198c216000586.jpg"
  ),
),
image.png

3. Image.file 本地文件图片

Container(
  width: 300,
  height: 300,
  color: Colors.lightGreenAccent,
  child: Image.file(
     //本地图片路径
     File("/Users/wei/Pictures/6036a50f4bfbfbeda345a6c174f0f736aec31f8c.jpg"),
  ),
),
image.png

4. Image.memory 内存图片

Image.memory(bytes)：从内存加载显示图片
这里需要传入图片的bytes数据，类型是Uint8List

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容