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

我就是我 2023-07-14 08:21 87阅读 0赞

### 文章目录 ###

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

### Image ###

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

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

#### 加载项目的资源图片 ####

1.  在工程根目录下创建一个`images`目录，并将图片`p3.png`拷贝到该目录。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]
2.  在`pubspec.yaml`中的`flutter`部分添加如下内容：

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

1.  加载该图片

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][3.5 _ICON]**

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

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

拉伸模式及重复模式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

#### 第三方库推荐 ####

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

### Icon ###

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

#### Icon 的优势 ####

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

#### Icon 使用例子 ####

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

flutter:
      uses-material-design: true

使用

String icons = "";
    // accessible:  or 0xE914 or E914
    icons += "\uE914";
    // error:  or 0xE000 or E000
    icons += " \uE000";
    // fingerprint:  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`和文本混用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]

#### 第三方库推荐 ####

*  [groovin\_material\_icons][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),

完~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230529/535c87796502423880b1f0f0f7f7d2fc.png
[3.5 _ICON]: https://book.flutterchina.club/chapter3/img_and_icon.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230529/67c7f64a090f46c38c0ada1f260948a1.png
[CachedNetworkImage]: https://pub.flutter-io.cn/packages/cached_network_image
[extended_image]: https://pub.flutter-io.cn/packages/extended_image
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230529/217a38a26f024026a8205dcd52bd0fb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20230529/3c8dbd4ac9c3458ab181212286a54136.png
[groovin_material_icons]: https://github.com/GroovinChip/groovin_material_icons
[Flutter-WanAndroid]: https://github.com/dongxi346/Flutter-WanAndroid