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上加上最小化、最大化、關閉按鈕,這樣層次感更強,也更容易管理和修改。
總結
以上是生活随笔為你收集整理的Duilib教程-自动布局1的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Duilib教程-非DUI控件
- 下一篇: Duilib教程-自动布局2