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>