在SOUI中使用布局模板

概要

注意：布局模板是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:

<?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>

在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中的效果：

 

模板的使用方法完成。

啟程軟件 2019-03-14