Flutter如何正确使用图片资源

现况

在使用Flutter中Image控件加载本地图片时,我们一般使用如下:

// 图片资源放在"assets/images"目录下.
Image.asset("assets/images/muma.png"),

那么问题就来了,这样使用可能会出现一些问题。

  • 问题1:如果目录没写对,或者后面路径修改了这里忘记修改了,就会导致图片显示错误。
  • 问题2:如果开发人员误删除图片资源,编译不会报错,会导致问题出现。
  • 问题3:如果后面路径需要更改,那么使用的地方都需要修改,修改起来特别的麻烦。
需求
  • 方便使用图片资源,可以参考Android。
  • 图片资源删除后,编译报错提示。防止图片资源删除导致程序问题。
  • 设计一个脚本,方便一键生成,方便易用。
实现
解决方案1

在刚使用Flutter开发的时候就发现了这个问题,起初解决方案是这样的。定义个类,提供返回图片资源路径。具体如下

class ImageUtils {static String getImgPath(String name, {String format: 'png'}) {return 'assets/images/$name.$format';}
}

其实使用此方式可以解决问题1和问题3,修改路径的话也只需要在此类中修改路径即可。但是没有解决问题2,如果开发人员勿删还在使用的图片资源时,编译是不会报错的,运行也是没有问题的,只有到使用此图片资源的界面才会发现错误,导致bug出现。

解决方案2

我们可以参考android资源的使用方式,在Android中使用资源文件都是 R.id.xxxx来引用的,那么我们是否也可以让Flutter也类似这么使用呢?思路是可行的。

思路
  • 切换到图片资源路径,读取目录图片资源。
  • 创建一个R文件(r.dart),写入一个R类,然后遍历图片资源,在R文件中的R类里,定义静态常量(可以使用图片资源名+后缀名定义常量名,方便用户使用)赋值为图片资源路径。
  • 使用是通过R.xxx即可。

通过这些思路,我们可以写一个脚本,来实现这个效果。你可以选择你擅长的脚本语言,shell或者py都是可以的。如果自己不擅长写脚本可以通过chatgpt来实现,很简单的,只要把自己的需求告诉他就可以了。这里我选择shell来实现。

具体实现
  • 步骤1:首先创建一个文件res_build.sh,内容如下
#!/usr/bin/env bash# 定义资源目录和输出目录
resourcesDir="assets/images"
outputDir="lib"# 切换到资源目录,获取资源数量和数据
cd "$resourcesDir" || exit
resCount=$(find ./* | wc -l | sed -e 's/^[[:space:]]*//')
resources=$(ls)# 切换到输出目录
cd ../..
cd "$outputDir" || exit# 遍历资源文件并汇总资源名集合
declare -a resNames
for resource in $resources; doresNames+=("$resource")
done# 创建资源r文件
progress=1
# 删除r文件
rm -f r.dart
# 类名写入r文件
echo 'class R {' >>r.dart
# 循环申明常量写入r文件
for resName in "${resNames[@]}"; donameSlices=($(echo "$resName" | tr '_' ' ' | tr '.' ' '))str=""for slice in "${nameSlices[@]}"; dostr+="${slice}_"doneresConstant="${str%?}"echo -ne "${progress}/${resCount}:${resName} \r"printf "  static const String %s = '%s/%s';\n" "$resConstant" "$resourcesDir" "$resName" >>r.dartprogress=$((progress + 1))
done
echo '}' >>r.dart# 自动格式化 Dart 代码文件
dart format --fix r.dart

注意:这里是拿我的flutter_xy项目来测试实现的。所以大家可以按照自己的项目情况修改。

  • 步骤2:添加或删除图片后,都需要执行res_build.sh脚本文件
    注:如果提示bash: ./res_build.sh: Permission denied,可以执行 chmod +x res_build.sh 授权。

  • 步骤3:执行步骤2后会生成一个R文件

class R {static const String fudai_png = 'assets/images/fudai.png';static const String fuli1_png = 'assets/images/fuli1.png';static const String fuli2_png = 'assets/images/fuli2.png';static const String fuli3_png = 'assets/images/fuli3.png';static const String img1_jpg = 'assets/images/img1.jpg';static const String img2_jpg = 'assets/images/img2.jpg';static const String img3_jpg = 'assets/images/img3.jpg';static const String img4_jpg = 'assets/images/img4.jpg';static const String muma_png = 'assets/images/muma.png';
}
  • 步骤4:在需要使用图片资源的地方,直接使用R.xxx即可。

注意:每次更新图片时,不管是新增还是删除图片,都需要执行脚本更新R文件即可。如果删除了图片,更新脚本后,原来使用的地方会编译报错,这样开发人员就知道了,避免了bug产生。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/754442.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PostgreSQL 锁机制

锁存在的意义 在了解 PostgreSQL 锁之前,我们需要了解锁存在的意义是啥? 当多个会话同时访问数据库的同一数据时,理想状态是为所有会话提供高效的访问,同时还要维护严格的数据一致性。那数据一致性通过什么来维护呢,…

深入浅出Go的`encoding/xml`库:实战开发指南

深入浅出Go的encoding/xml库:实战开发指南 引言基本概念XML简介Go语言中的XML处理结构体标签(Struct Tags) 解析XML数据使用xml.Unmarshal解析XML结构体标签详解处理常见解析问题 生成XML数据使用xml.Marshal生成XML使用xml.MarshalIndent优化…

加速量子计算机商业化!富士通日立NEC等联合成立新量子计算公司

内容来源:量子前哨(ID:Qforepost) 编辑丨王珩 编译/排版丨沛贤 深度好文:700字丨5分钟阅读 日本工业界和学术界将在 2024 年联合成立新一家公司,研发量子计算机并将其商业化。包括富士通、日立和NEC在内…

MYSQL实现行转列的三种方式

示例表 : nanesubjectscore张三语文66张三数学66张三英语66 转换为: 姓名语文数学英语张三666666 方法一: case when SELECT NAME,max( CASE SUBJECT WHEN 语文 THEN score END ) 语文,max( CASE SUBJECT WHEN 数学 THEN score END ) 数学…

arcgis 点连接到面(以地级市图层为例)

地级市图层进行“点到面”的连接,并输出 在点击地级市图层,右击——连接和关联——连接 选择基于空间位置的另一图层数据,文件选择上面输出并添加的图层文件,进行“点到面”的连接,可依据新需求选择平均值&#xff0c…

Halcon 3D算子总结整理

halcon 3D包含以下几个模块: 3D Matching(3D匹配)3D Object Model(3D模型)3D Reconstruction(3D重构)3D Transformations(3D转换) 1. 3D Matching 1.1 3D Box3D盒查找器…

解锁数据可视化新境界:山海鲸可视化免费编辑与组件探索

作为一名长期使用山海鲸可视化的资深用户,我在数据可视化看板的制作过程中,深刻感受到了这款软件带来的便捷与高效。今天,我想与大家分享一些我在使用山海鲸可视化制作数据可视化看板时的经验,给对这款产品同样感兴趣的朋友同行一…

TT-100K数据集,YOLO格式

TT-100K数据集YOLO格式,分为train、val和test,其中train中共有6793张图片,val中共有1949张图片,test中共有996张图片。数据集只保留包含图片数超过100的类别。共计46类。

C#,图论与图算法,无向图(Graph)回环(Cycle)的不相交集(disjoint)或并集查找(union find)判别算法与源代码

1 回环(Cycle)的不相交集(disjoint)或并集 不相交集数据结构是一种数据结构,它跟踪划分为多个不相交(非重叠)子集的一组元素。联合查找算法是对此类数据结构执行两个有用操作的算法: 查找:确定特定元素所在的子集。这可用于确定两个元素是否在同一子集中。 并集:将…

Windows server 2008 R2共享文件配置和web网站的发布 试题一(Windows部分)

Windows server 2008 R2共享文件配置和web网站的发布 试题一(Windows部分) 设置虚拟机与本机互通设置虚拟机IP关闭虚拟机防火墙设置本机IP测试本机与虚拟机是否可以互通 开启文件共享function discovery resource publication服务的开启SSDP Discovery服…

Monoxer Programming Contest 2024(AtCoder Beginner Contest 345)(A~C)

A - Leftrightarrow 如果字符串最左边是<&#xff0c;最右边是>&#xff0c;中间都是&#xff0c;那么就输出Yes&#xff0c;否则No #include <bits/stdc.h> //#define int long long #define per(i,j,k) for(int (i)(j);(i)<(k);(i)) #define rep(i,j,k) for…

C#入门及进阶教程|Windows窗体属性及方法

1.Windows窗体 窗体本身是一个对象&#xff0c;对应于System.Windows.Forms名称空间的Form类。它有自己的属性、方法和事件&#xff0c;用于控制窗体的外观和行为。窗体又是各种控件的容器&#xff0c;用于容纳各种窗体控件。如果想生成窗体&#xff0c;必须从Form类派生出自己…

web渗透测试漏洞复现:Elasticsearch未授权漏洞复现

web渗透测试漏洞复现 Elasticsearch未授权漏洞复现Elasticsearch简介Elasticsearch复现Elasticsearch漏洞修复和加固措施 Elasticsearch未授权漏洞复现 Elasticsearch简介 Elasticsearch 是一款 Java 编写的企业级搜索服务&#xff0c;它以分布式多用户能力和全文搜索引擎为特…

利用textarea和white-space实现最简单的文章编辑器 支持缩进和换行

当你遇到一个非常基础的文章发布和展示的需求&#xff0c;只需要保留换行和空格缩进&#xff0c;你是否会犹豫要使用富文本编辑器&#xff1f;实际上这个用原生的标签两步就能搞定&#xff01; 1.直接用textarea当编辑器 textarea本身就可以保存空格和换行符&#xff0c;示例如…

小巧玲珑的SQLite

SQLite是桌面端和移动端的不错选择 前言 SQLite身影无处不在。 SQLite&#xff0c;是一款轻型的数据库&#xff0c;是遵守ACID的关系型数据库管理系统&#xff0c;它的设计目标是嵌入式的&#xff0c;而且目前已经在很多嵌入式产品中使用了它&#xff0c;它占用资源非常的低&a…

【目标检测】2. RCNN

接上篇 【目标检测】1. 目标检测概述_目标检测包括预测目标的位置吗?-CSDN博客 一、前言 CVPR201 4经典paper:《 Rich feature hierarchies for accurate object detection and semantic segmentation》&#xff0c;https://arxiv.org/abs/1311.2524, 这篇论文的算法思想被称…

C#集合:从字典到队列——探索数据结构核心

文章目录 C# 中的集合类型C# Dictionary 字典C# Hashtable&#xff1a;哈希表Hashtable 类中的属性Hashtable 类中的方法 C# SortedList&#xff1a;排序列表SortedList 类的中的属性SortedList 类的中的方法 C# Stack&#xff1a;堆栈Stack 类中的属性Stack 类中的方法 C# Que…

Python数据分析与可视化笔记 二 机器学习与数据分析的关系 数据分析的基本步骤 Python和数据分析

机器学习与数据分析的关系 机器学习一开始研究的目的是让机器具有学习能力从而拥有智能。目前公认的定义是&#xff1a;利用经验来改善计算机系统自身的性能。由于经验在计算机系统中主要以数据形式存在&#xff0c;因此机器学习需要对数据进行分析。 数据分析的定义则是&#…

基于深度学习YOLOv8+Pyqt5的工地安全帽头盔佩戴检测识别系统(源码+跑通说明文件)

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;318安全帽 获取完整源码源文件7000张已标注的数据集训练好的模型配置说明文件 可有偿59yuan一对一远程操作配置环境跑通程序 效果展示&#xff08;图片检测批量检测视频检测摄像头检测&#xff09; 基于深度学习YOLOv8Pyqt…

JVM的双亲委派模型和垃圾回收机制

jvm的作用是解释执行java字节码.java的跨平台就是靠jvm实现的.下面看看一个java程序的执行流程. 1. jvm中的内存区域划分 jvm也是一个进程,进程在运行过程中,要行操作系统申请一些资源.这些内存空间就支撑了后续java程序的执行. jvm从系统申请了一大块内存,这块内存在java程序使…