Flutter高效开发之本地资源图片的引用

冷不防 2021-09-02 05:42 356阅读 0赞

在继续上一篇[原创 Flutter高效开发之封装Text][Flutter_Text]后，我们再次封装了本地资源文件的引用操作。

class MImage { 
      static String getImgPath(String imgPath) { 
        return 'libres/images/$imgPath';
      }
    
      static Image assetImage(String imgPath, double width, double height,
          { BoxFit fit = BoxFit.scaleDown}) { 
        return Image.asset(
          'libres/images/$imgPath',
          width: width,
          height: height,
          fit: fit,
        );
      }
    
      static Image icLogo = assetImage('icon_launch.png', 48, 48);
    }

操作步骤：

1 切记要在`pubspeck.yaml`文件中进行资源文件的引入

assets:
        - libres/images/

2 资源路径放在项目目录下即可，文件夹名称怎么取都行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70_pic_center]  
3 在恰当都位置进行引用

Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          MImage.icLogoName,
          SizedBox(height: 8),
          MBuilder.text('融资融券·交易优选',color: MColor.subColor,size: 10,letterSp:2)
        ],
      )

通过以上操作，是不是发现瞬间简洁了许多。

## 更多： ##

[如何写一个自己的小程序并上线][Link 1]

[ Github搭建个人博客（2019最新版,亲测）][Link 1]

qq加油小程序  
![徐代龙的技术博客][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]

关注下面公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。

在微信后台回复「130个小程序」，即可免费领取享有导入就能跑的微信小程序  
![在这里插入图片描述][20201025221638123.png_pic_left]

[Flutter_Text]: https://blog.csdn.net/xudailong_blog/article/details/109345531
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70_pic_center]: /images/20210529/881b5ded73444a9eaed81cc45570b978.png
[Link 1]: https://blog.csdn.net/xudailong_blog/article/details/107622817
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/01a59c8a2a3b40f5b4b8867c3f19dcfd.png
[20201025221638123.png_pic_left]: /images/20210529/71f1d5d693ec4ad7846aa05d33e74161.png