在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