美文网首页
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