Flutter 图片 Image 图标 Icon 参数图文理解

标签： Flutter 笔记 android html ios flutter

文章目录

Image

加载项目的资源图片
加载系统的图片
加载网络图片
FadeInImage 使用
Image 填充模式
第三方库推荐

Icon

Icon 的优势
Icon 使用例子
第三方库推荐

Image

Image组件用于显示图片，而图片的来源大概可分为以下：

项目的资源图片
系统的图片
加载网络图片

加载项目的资源图片

在工程根目录下创建一个images目录，并将图片p3.png拷贝到该目录。
在pubspec.yaml中的flutter部分添加如下内容：

第一种方式：加载单个文件
  assets:
    - images/p3.png
   
第二种方式：加载整个文件夹
  assets:
    - assets/app.db
    - assets/images/
    - assets/fonts/

加载该图片

Image.asset("images/p3.png",
  width: 100.0,
)

加载系统的图片

指定系统路径下的图片

Image.file(new File(’/storage/xxx/xxx/test.jpg’))；

加载网络图片

指定图片链接
图片宽度（可选）

Image.network(
  "https://www.wanandroid.com/blogimgs/9fc6e10c-b3e8-46bb-928b-05ccd2147335.png",
  width: 100.0,
)

FadeInImage 使用

FadeInImage 控件提供了图片占位的功能，并且支持在图片加载完成时淡入淡出的视觉效果。

FadeInImage.assetNetwork(
                 placeholder: 'https://pcdn.flutterchina.club/imgs/3-19.png', // 可放 gif 占位
                 image: 'https://pcdn.flutterchina.club/imgs/3-19.png',
                 fit: BoxFit.cover, //图片拉伸模式
                 width: 200, height: 200,
               )

Image 填充模式

参考：3.5 图片及ICON

在Android开发时图片还有裁剪的模式，Flutter 的 Image这里也提供了

填充模式 fit：
- fill 会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形
- cover 会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
- contain 图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
- fitWidth 图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
- fitHeight 图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
- none 图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
重复模式 repeat 等属性：当图片本身大小小于显示空间时，指定图片的重复规则
- repeatY
- repeatX

拉伸模式及重复模式：
在这里插入图片描述

第三方库推荐

CachedNetworkImage
支持占位符和错误显示，并用sqflite管理图片缓存。
extended_image
支持加载以及失败显示，缓存网络图片，缩放拖拽图片，图片浏览(微信掘金效果)，滑动退出页面(微信掘金效果)，编辑图片(裁剪旋转翻转)，保存，绘制自定义效果等功能

Icon

在 Flutter 可以像Web开发一样使用iconfont即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。如：退出登录的图标可以使用\0xe879字符表示
在这里插入图片描述

Icon 的优势

体积小：可以减小安装包大小。
矢量的：iconfont都是矢量图标，放大不会影响其清晰度。
可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
可以通过TextSpan和文本混用。

Icon 使用例子

Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下：

flutter:
  uses-material-design: true

使用

String icons = "";
// accessible: &#xE914; or 0xE914 or E914
icons += "\uE914";
// error: &#xE000; or 0xE000 or E000
icons += " \uE000";
// fingerprint: &#xE90D; or 0xE90D or E90D
icons += " \uE90D";

// 应用文本样式
Text(icons,
  style: TextStyle(
      fontFamily: "MaterialIcons",
      fontSize: 24.0,
      color: Colors.green
  ),
);
// 使用 Icons 调用的方式
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.accessible,color: Colors.green,),
    Icon(Icons.error,color: Colors.green,),
    Icon(Icons.fingerprint,color: Colors.green,),
  ],
)

TextSpan和文本混用
在这里插入图片描述

第三方库推荐

groovin_material_icons

具体使用可查看源码或者 Flutter-WanAndroid

groovin_material_icons: ^1.1.5

定义
 List _loginMethod = [
    {
      "title": "微信",
      "icon": GroovinMaterialIcons.wechat,
    },
    {
      "title": "QQ",
      "icon": GroovinMaterialIcons.qqchat,
    }
  ];
 使用：
 IconButton(
        icon: Icon(item['icon'],
        color: Theme.of(context).iconTheme.color),

完~

本文链接：https://blog.csdn.net/ITxiaodong/article/details/104852399

智能推荐

flutter 使用image_picker上传图片

第一步：封装，可以单独放在一个文件里可以直接复制第二步：打开底部弹框调用showModalBottomSheet打开底部弹框，return第一步的HspPickerImagePanel(),val值就是返回的本地图片的地址，然后可以处理使用dio上传，具体可以参考这篇文章https://blog.csdn.net/codekxx/article/details/101770516 注意上...

flutter image-picker 上传图片

画part页面底部面板里选择上传相册图片or拍照上传：相册上传、拍照上传事件查询今日是否打卡调接口获取图片上传路径的方法传参调接口打卡方法...

Flutter中，加载并显示图片使用的是Image组件。我们先来看下这个构造函数： Image的构造参数有一下几种分别是： Image:从Provider获取图像 Image.asset:加载资源图片 Image.file:加载本地图片文件 Image.network:记载网络图片 Image.memory:加载Uint8List资源图片我们接下来看一下如何使用我们加载了一张网络图片。其他的使...

Flutter图片上传(Dio + Image_picker)

PS: 图片上传功能在项目中属于很常见的功能，网上也有蛮多图片上传的框架，看的眼花缭乱的。。。最后，本着自己最熟悉的才是最好的原则选择 Flutter Dio,所以项目中用的网络框架也是Flutter Dio ，直接拿来写个简单的demo，也算记录下Flutter踩坑心酸史吧。。。国际惯例（为了省事没做图片大小限制了。。。） test.gif 废话不多说了，直接上代码，先添加两个依赖： &nb...

使用Feature---style---image---icon：利用单机时间来是的图标大小变化

使用Feature---style---image---icon：利用单机时间来是的图标大小变化 ...