Duilib教程－自動佈局1

咱們要實現一個帶標題欄和狀態欄的程序，同時要支持拉伸，即包括最小化、最大化，圖以下：

 

XML:

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

<Window size="695,542">

    <VerticalLayout width="657" height="517" bkcolor="#FFA0A0A4">

        <HorizontalLayout name="title" height="32" bkcolor="#FF63A6F1">

            <Button text="X" bordersize="1" float="true" pos="608,0,0,0" width="60" height="30" bkcolor="#FF008067" bkcolor2="#0000C020" bordercolor="#00FFFF00" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" />

        </HorizontalLayout>

        <HorizontalLayout name="mid" bkcolor="#FFBABABA" />

        <HorizontalLayout name="status" height="30" bkcolor="#FF808080" />

    </VerticalLayout>

</Window>

 

在DUIDesigner中，拖動窗口邊框，便可看到效果，標題欄和狀態欄的位置都不變，即隨窗口大小而改變。

 

看屬性，發現，status和title都有屬性 height，而中間的，什麼屬性都沒有。在窗口設置以下：

title:

mid:

 

能夠知道，pos便可以設置float屬性爲false的拉伸操做，因此不僅是LAYOUT能夠隨窗口（準確的說應該是擁有它的LAYOUT）自由拉伸，普通的控件也能夠，只要float爲false。

 

Float意思爲浮動，當它爲TRUE時，它就浮動在窗口上面，位置永遠不會變（相對於擁有它的LAYOUT）。

當它爲FALSE時，它浮不起來，停在水上，隨波逐流，因此可以被流水（LAYOUT）改變它的大小。

 

注意，只有right和bottom纔有效。若是不爲0，那麼它就是該高度，即不隨父LAYOUT改變大小（位置不能更改）。爲0就是跟父LAYOUT更改大小。

 

在上面這個示例中，關閉按鈕並不隨着窗口改變位置，由於咱們看到了，它的float爲TRUE。若是咱們想要它永遠停在最右邊呢？

看下面的XML:

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

<Window size="695,542">

    <VerticalLayout width="657" height="517" bkcolor="#FFA0A0A4">

        <HorizontalLayout name="title" height="32" bkcolor="#FF63A6F1">

                            <Control />

            <Button text="X" bordersize="1" maxwidth="60" pos="608,0,0,0" width="60" height="30" bkcolor="#FF008067" bkcolor2="#0000C020" bordercolor="#00FFFF00" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" />

        </HorizontalLayout>

        <HorizontalLayout name="mid" bkcolor="#FFBABABA" />

        <HorizontalLayout name="status" height="30" bkcolor="#FF808080" />

    </VerticalLayout>

</Window>

 

咱們加了一個 float 的 Control，以及將關閉按鈕的 maxwidth設置爲60，同時FLOAT設置爲FALSE（float屬性默認爲false）。

 

這樣設置的意思是：關閉按鈕最大寬度爲60，因此它不能被拉得更寬。

在它的左邊有一個FLOAT，它能夠被任意拉伸。因此當窗口被拉伸時，關閉按鈕爲60，左邊的control就被拉伸到 窗口寬 - 60。

 

若是最右邊要加最大化、最小化按鈕，實現原理也是同樣的。固然，你能夠在最右邊加一個LAYOUT，在這個LAYOUT上加上最小化、最大化、關閉按鈕，這樣層次感更強，也更容易管理和修改。