美文网首页
Flutter 基础控件之Image

Flutter 基础控件之Image

作者: 繁华乱世沧桑了谁的容颜 | 来源:发表于2020-08-20 10:24 被阅读0次
 //Text 文本测试
  child: new Image.network(
    "http://img.improve-yourmemory.com/pic/33afa10cf2b273b4e7beb194c0a9bcc1-0.jpg",
    fit: BoxFit.fill,
    color: Colors.yellowAccent,
    colorBlendMode: BlendMode.darken,
    repeat: ImageRepeat.repeat,
  ),
效果如下: image.png

常用属性讲解

Image 常用两种,一种是 本地图片资源(asset file),如APP 切图 等
另一种是网络图片,写法Image.network

fit image最常用的属性 它设置Image的显示风格

1.fill 的显示风格是全部充满,可能会变形 如图


image.png

2.contain 不变形 并完全显示图片但是会有留白 效果如下图


image.png
  1. cover 不变形 但是会剪切 并充满图片 效果如下图


    image.png

    以上三种为最常用类型 其他可自行查看

colorBlendMode 效果相当于添加滤镜
repeat 设置充填模式,实际开发中用处不大 可忽略

相关文章

网友评论

      本文标题:Flutter 基础控件之Image

      本文链接:https://www.haomeiwen.com/subject/pyhsjktx.html