這篇是ZK <hlayout>，<vlayout>及屬性hflex及vflex的實驗。
首先從一個<hlayout>開始，裡面有兩個有文字的<div>
<zk>
<hlayout style="background:beige;">
<div style="background:yellow;">LEFT</div>
<div style="background:yellowgreen;">RIGHT</div>
</hlayout>
</zk>
效果如下，可以看到<hlayout>會自動占滿整個畫面寬度。
如果把<div>中的文字都拿掉，仍可以看到<hlayout>的顏色區塊，但<div>因為沒有內容了，所以沒有大小。
<zk>
<hlayout style="background:beige;">
<div style="background:yellow;"></div>
<div style="background:yellowgreen;"></div>
</hlayout>
</zk>
如果把<div>都拿掉，則就看不到<hlayout>了。
再回到原本的設定如下
<zk>
<hlayout style="background:beige;">
<div style="background:yellow;">LEFT</div>
<div style="background:yellowgreen;">RIGHT</div>
</hlayout>
</zk>
其實際會被轉成以下的html。
<div id="pYnB0" style="background:beige;" class="z-hlayout">
<div id="pYnB1-chdex" class="z-hlayout-inner" style="padding-right:5px">
<div id="pYnB1" style="background:yellow;" class="z-div">
<span id="pYnB2" class="z-label">LEFT</span>
</div>
</div>
<div id="pYnB3-chdex" class="z-hlayout-inner" style="">
<div id="pYnB3" style="background:yellowgreen;" class="z-div">
<span id="pYnB4" class="z-label">RIGHT</span>
</div>
</div>
</div>
從上面可以看到<hlayout>會再用一個hlayout inner div來包住裡面的子元件，而這個inner div預設會用padding-right:5px的空間來和右邊的inner div來隔開，也就是下圖紅色圈起的部分。
接著我們在左邊的<div>加上hflex="true"
<zk>
<hlayout style="background:beige;">
<div style="background:yellow;" hflex="true">LEFT</div>
<div style="background:yellowgreen;">RIGHT</div>
</hlayout>
</zk>
則左邊的<div>的寬度會充滿整個<hlayout>直到右邊的<div>，而右邊的<div>仍維持原本的大小。
反之在右邊的<div>加上hflex="true"則效果相反。
接著改用hflex="1"設定左邊的<div>，而右邊的<div>設定為hflex="2"
<zk>
<hlayout style="background:beige;">
<div style="background:yellow;" hflex="1">LEFT</div>
<div style="background:yellowgreen;" hflex="2">RIGHT</div>
</hlayout>
</zk>
可以看到左邊的<div>占了寬度的一等分，右邊的<div>占了2等份，一共三等份。
官網對於hflex的說明如下
indicates how a component's parent distributes the remaining empty space among its children. Hflex controls the flexibility in the horizontal direction, while vflex in the vertical direction.
其用來決定一個元件的父元件(parent)如何分配剩餘的空間給其子元件，hflex控制水平的空間，vflex控制垂直的空間。
接著把<hlayout>加上屬性hflex="min"。
<zk>
<hlayout style="background:beige;" hflex="min">
<div style="background:yellow;">LEFT</div>
<div style="background:yellowgreen;">RIGHT</div>
</hlayout>
</zk>
則<hlayout>的水平範圍被縮到最小，僅能容納其子元件內容的空間而已。
至於<vlayout>和vflex的概念也是一樣，只是是用來控制垂直layout中的子元件的占高比例。
可以試著練習看看要如何達成下面的效果。
上面排列的效果設定如下
<zk>
<hlayout style="background:beige;">
<div style="background:pink;" height="100px" width="100px">IMAGE</div>
<div style="background:yellow;" hflex="true">MIDDLE</div>
<vlayout style="background:yellowgreen;" vflex="true">
<div style="background:violet;" vflex="true"></div>
<hlayout>
<button label="button1"/>
<button label="button2"/>
</hlayout>
</vlayout>
</hlayout>
</zk>
想法為，左邊要放一個固定大小的圖片，右邊要放水平排列的按鈕，且按鈕必須與圖片的底部切齊。先設定一個<hlayout>，裡面有三個元件，最左邊是代表圖片的<div>，右邊是用來放按鈕的<vlayout>，而中間的<div>是用來把右邊的<vlayout>撐到<hlayout>的最右側。
因為中間的<div>要撐到最大，所以加上hflex="true"。
而右邊的<vlayout>要用來擺放水平排列的按鈕，所以在<vlayout>中加入<hlayout>用來擺放按鈕。
但因為水平排列的按鈕要切齊圖片的底部，所以需要在<vlayout>加入一個<div vflex="true">來將包裝按鈕的<hlayout>垂直撐到底部。
參考：
沒有留言:
張貼留言