ZK <hlayout>, <vlayout> hflex, vflex

這篇是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>垂直撐到底部。

參考：

• ZK - Hflex and Vflex
• ZK - Hlayout and Vlayout
• ZK - Hlayout