Duilib教程－自動布局3－分隔條

先看一個常用的圖，如下：

 

左邊是導航欄，右邊是信息區。

中間可以自由拉伸。

XML如下：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>

<Window size="695,542">

    <HorizontalLayout width="695" height="542" bkcolor="#FFA0A0A4">

        <HorizontalLayout width="200" bkcolor="#FF008080" sepwidth="6" sepimm="true" />

        <HorizontalLayout bkcolor="#FFA6CAF0" />

    </HorizontalLayout>

</Window>

 

sepwidth 全稱為 seperator width，分隔條的寬度。這個值分正值、負值，正值表示分隔條在右邊，負值表示分隔條在左邊。

 

sepimm 全稱為 separate immediately，立即拉伸，即鼠標一移動，馬上就設置LAYOUT的大小。

 

DUILIB似乎有一個BUG，就是當左邊被拖到寬度為0時，它為自動還原為原始大小。為了解決這個BUG，我們需要設置它的最小寬度，minwidth=”1”，這樣BUG就不存在了咯。

 

解決這個BUG的時候，你也已經知道，如何限制左邊的LAYOUT的大小了吧，maxwidth，如果設置了這個屬性，指定了最大寬度，那它就會限制在一定大小了。以下的XML，讀者可作測試：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>

<Window size="695,542">

    <HorizontalLayout width="695" height="542" bkcolor="#FFA0A0A4">

        <HorizontalLayout minwidth="50" maxwidth="300" width="200" bkcolor="#FF008080" sepwidth="6" sepimm="true" />

        <HorizontalLayout bkcolor="#FFA6CAF0" />

    </HorizontalLayout>

</Window>

 

這里要說明一個非常重要的規則：

如果分隔條是豎條的，｜，那分隔條屬性為sepwidth，它的LAYOUT必須是HorizontalLayout，即水平布局，因為只有水平布局被水平拉伸才是合理的。

如果分隔條是橫條的，一，那分隔條屬性為sepheight，它的LAYOUT必須是VerticalLayout，即垂直布局，因為只有垂直布局被垂直拉伸才是合理的。

 

所以，在上面的XML中，如果你將左邊的LAYOUT換成VerticalLayout，你會發現分隔條無效，因為VerticalLayout根本沒有sepwidth屬性。

 

在設置橫條的分隔條時，需要設置minheight、maxheight屬性，這樣便於控制其大小。sepheight為正時，表示分隔條在下方，為負時，表示在上方。

 

下面我貼一個擁有上下、左右分隔條的XML，同時包含正負值。

 

XML:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>

<Window size="695,542">

    <HorizontalLayout width="695" height="542" bkcolor="#FFA0A0A4">

        <HorizontalLayout sepwidth="5" sepimm="false" minwidth="50" maxwidth="300" width="137" bkcolor="#FF008080" />

        <VerticalLayout>

            <VerticalLayout bkcolor="#FF103A78" />

            <VerticalLayout bkcolor="#FF5D4425" minheight="50" sepheight="-5" sepimm="true"/>

        </VerticalLayout>

    </HorizontalLayout>

</Window>