SOUI官方论坛

 找回密码
 立即注册
查看: 337|回复: 4

在SOUI中使用布局模板

[复制链接]

303

主题

656

帖子

4624

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4624
发表于 2019-8-12 22:04:45 | 显示全部楼层 |阅读模式
概要
注意:布局模板是SOUI 2.8.0.4 新增加的功能。之前版本不支持。
SOUI的listview等一系统控件支持通过模板来创建列表项,这里要说的模板不是指listview中的使用的列表项模板。
对于比较大的项目,在页面布局中可能会出现重复的布局结构,只是部分属性不一样。对于完全相同的布局,soui一直支持使用include属性来重复引用布局XML脚本。但是对于属性可能发生变化但整体布局一致的情况,在实现布局模板支持之前,除了在布局脚本中重复XML没有更好的办法。
有了布局模板,这样重复的布局就可以更好的解决了。
使用示例
我们先看一下demo中提供的例子。
首先是增加了一个values\template.xml文件,当然在uidef.xml里也加上:
<!--定义全局template对象-->  <template src="values:template"/>
再打开template.xml:
[url=][/url]
<?xml version="1.0" encoding="utf-8"?><template>  <g.block>    <window name="{{name}}" layout="hbox" gravity="center">      <window size="-1,-1" layout="hbox">        <text text="name:" colorText="{{color}}" />        <link.web text="{{text}}" href="{{text}}"/>      </window>      <img skin="skin_avatar"/>    </window>  </g.block></template>[url=][/url]

在demo中我们通过template.xml的template元素定义了一个模板:g.block ,这里用"g."开头,代表这是一个全局的模板。有全局模板就会有局部模板,局部模板和全局模板定义类似,只是它定义在布局文件的SOUI节点下,和root节点平级即可,也可参考局部style,局部skin的设置。一个局部的模板只能在当前宿主窗口中有效。另外这里的名字可以随便写,不一定要以“g.”开头。
观察上面的模板,我们发现有3个字符串是“{{xxx}}”形式,这是布局的变量,将会在使用布局的时候被传递的实际参数替换。
再看一下在布局XML里如何引用这个模板:
<t:g.block size="-1,-1">           <data name="tpl_soime" color="#ff0000" text="soime.cn!"/>        </t:g.block>        <t:g.block size="-2,-1">           <data name="tpl_soui" color="#0000ff" text="ui520.cn"/>        </t:g.block>
注意,SOUI使用“t:”这个名字空间来标识后面是一个模板调用。
模板调用后面的布局参数会覆盖模板的第一个子节点的布局参数。注意,一个模板应该只有一个布局根节点,多个布局根节点会被自动忽略。
在调用模板的XML节点必须有一个data子节点来存储参数值,这些参数会自动替换模板中对应的变量。
这就是整个模板使用过程。如果不使用模板,达到同样的效果,模板中的XML要重复写2次,使用模板后,xml结构会更简洁。
运行效果:
下面我们看看demo中的效果:
8.png
模板的使用方法完成。
启程软件 2019-03-14

30

主题

60

帖子

260

积分

02:00元婴期

Rank: 3Rank: 3

积分
260
发表于 2019-11-11 16:55:57 | 显示全部楼层
正好需要,谢谢大佬

30

主题

60

帖子

260

积分

02:00元婴期

Rank: 3Rank: 3

积分
260
发表于 2019-11-12 23:20:04 | 显示全部楼层
这个版本号怎么查看,我用的是之前同事给的soui,不知道是具体多少版本,如果我是低版本,又想用这个功能,怎么用啊?

303

主题

656

帖子

4624

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4624
 楼主| 发表于 2019-11-13 08:25:15 | 显示全部楼层
darkannie 发表于 2019-11-12 23:20
这个版本号怎么查看,我用的是之前同事给的soui,不知道是具体多少版本,如果我是低版本,又想用这个功能, ...

如何查看soui版本号
http://www.soui.vip/forum.php?mo ... d=190&fromuid=1
(出处: SOUI官方论坛)


善用论坛搜索

30

主题

60

帖子

260

积分

02:00元婴期

Rank: 3Rank: 3

积分
260
发表于 2019-11-13 19:42:32 | 显示全部楼层
多谢,我是2631。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|SOUI官方论坛 ( 粤ICP备18103663号-2 )

GMT+8, 2019-12-11 04:19

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表