QML Image获取资源路径的细节

移动开发
在最近笔者使用QML的过程中,在Image获取资源路径的细节上就出现了疏漏之处,产生了bug。本文我们以此为例介绍“QML Image获取资源路径的细节”。

 QML是门相当新的UI描述语言,因此在文档上总难免有疏漏之处,如果因此产生了bug,则就需要花费大量的时间去排查。

在最近笔者使用QML的过程中,在Image获取资源路径的细节上就出现了这样的情况。

Image 是qml中一个非常普通的元素,通常使用方法如下:

  1. Image { 
  2.  
  3. width: 120; height: 120 
  4.  
  5. fillMode: Image.TileHorizontally 
  6.  
  7. smooth: true 
  8.  
  9. source: "qtlogo.png" 
  10.  

其中,source指的Image元素获取资源的url路径,这个url可以是本地的绝对路径或者相对路径,也可以是qt资源系统的路径,甚至是网络资源的路径。

正是这个看起来不起眼的路径,却会带来跟预期想之外的结果,并且,仅仅从代码上来看,没有半点错误的地方。

要了解这种情况的出现,应该要知道qml的两种使用方式:

1.暴露QML源码的使用方法,即不对QML文件进行处理,存放在可执行文件的目录下,使用QtDeclarative模块动态载入,一般适合以开源程序;

2.混淆QML源码的使用方法,即将QML文件加入到qt资源系统,编译成二进制文件供QtDeclarative模块使用,这样的好处,是可以隐藏代码,供商业项目使用。

在前种的使用方式中,Image元素对于读取资源路径正确无误,在Mac.OS.X,Ubuntu和windows平台上表示一致,但是后者,却出现了不同。

假设Image以如下代码使用:

QML是门相当新的UI描述语言,因此在文档上总难免有疏漏之处,如果因此产生了bug,则就需要花费大量的时间去排查。

在最近笔者使用QML的过程中,在Image获取资源路径的细节上就出现了这样的情况。

Image 是qml中一个非常普通的元素,通常使用方法如下:

  1. property url imageUrl: "" 
  2.  
  3. Image { 
  4.  
  5. width: 120; height: 120 
  6.  
  7. fillMode: Image.TileHorizontally 
  8.  
  9. smooth: true 
  10.  
  11. source: imageUrl == "" : "xx/me/My Data/picture.jpg" ? "resource/qtlogo.png" 
  12.  

QML代码段所在的QML文件和qtlogo都处在qt资源系统中,xx/me/My Data/picture.jpg则值的是三个系统下实际的绝对路径,这是很异常的情况发生了。

在windows下Image的表现很正常,但是在Ubuntu下,却无法正常显示系统路径中的图片picure.jpg,一个代码显示出不同的结果来是相当费解的事,但是事实确很简单,这个source提供Url的写法是错误的,一个错误的代码自然会出现异常情况。

当QML处在qt 资源系统中,它获取图片的路径自然也是去qt资源系统中获得了,也就是说上述的两个路径变成了qrc:xx/me/My Data/picture.jpg和qrc:resource/qtlogo.png,前者根本不在资源系统内,自然就不会显示了。

当然,对这样的情况自然有正确的解决办法,那就是对前者路径的使用应该使用file:///xx/me/My Data/picture.jpg,这样QML才会正常解析为本地文件的路径。

至此,对于Image 资源路径可以总结出三个规律:

1.在没用使用qt资源系统时,Image的路径可以是绝对或者相对,并不需要特殊的表示;

2.当使用qt资源系统时,如果要特定知指向本地路径中的图片资源,那就要使用file://标示;

3.当获取网络图片资源并使用使用qt资源系统,由于有http表示存在,QML会自然去除qrc:标示。

其中第三点文中并没有说明,但是有兴趣的同学可以去试试。

【编辑推荐】

  1. QML教程:Review Native Quick Widgets
  2. QML教程:Qtmediahub项目概述
  3. QML教程:构建和安装QtComponents
  4. QML教程:Qt-Quick六大开源组件

责任编辑:佚名 来源: cuteqt
相关推荐

2010-01-28 14:54:01

C++资源管理

2009-12-25 17:48:43

WPF资源路径

2010-03-05 13:31:02

Linux进程文件路径

2011-06-30 11:14:23

QML Desktop

2011-03-21 17:06:31

QtmediahubQMLQt

2011-06-24 16:27:41

QML UI

2011-06-27 15:08:18

QML 视图

2011-06-14 17:03:03

QML Qt

2022-11-04 10:49:56

Linux文件

2009-07-17 11:30:44

Swing Image

2010-05-25 13:22:43

2012-09-13 09:35:35

CSSJS编程

2010-01-19 17:28:36

东方通中间件

2021-10-30 20:49:24

算法 Xpath路径

2011-06-20 13:23:03

Qt Quick QML

2011-03-14 13:07:18

QMLQt

2011-06-10 11:05:05

Qt Quick QML

2011-05-16 14:12:30

QuickWidgetQML

2021-08-17 09:46:57

设计细节产品体验用户

2011-06-15 16:22:38

点赞
收藏

51CTO技术栈公众号