duilib進階教程 -- Container控件 (3)

　　前面兩個教程的目的是教大家與MFC結合，那么從這篇起，將不再使用MFC，而使用純win32項目，本文的所有知識已經在《duilib入門教程》里面講過了，因此基礎知識不再贅述。

　　代碼下載：http://download.csdn.net/detail/qq316293804/6433161

　　效果如下（可拖拽邊緣調節窗口大小，圖片會自動居中）

　　此例子唯一需要說明的就是XML，代碼如下：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="800,520" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="600,400">
    <VerticalLayout bkcolor="#FF070700">
        <HorizontalLayout height="40" />
        <HorizontalLayout>
            <VerticalLayout />
            <VerticalLayout width="336" bkimage="skin\bk_logo_light.png">
                <HorizontalLayout />
                <HorizontalLayout height="164" bkimage="skin\bk_logo_image.png">
                    <HorizontalLayout>
                        <VerticalLayout />
                        <VerticalLayout width="168">
                            <VerticalLayout height="40" />
                            <VerticalLayout height="20" bkimage="skin\bk_logo_text.png" />
                            <VerticalLayout />
                        </VerticalLayout>
                        <VerticalLayout />
                    </HorizontalLayout>
                </HorizontalLayout>
                <HorizontalLayout />
            </VerticalLayout>
            <VerticalLayout />
        </HorizontalLayout>
        <HorizontalLayout height="50" />
    </VerticalLayout>
</Window>

　　可以看到到處都是HorizontalLayout 、VerticalLayout，然后幾個bkimage也很亂，這里有幾個原因：

　　1、由於迅雷的中間那一塊是由三個圖片組成，所以布局很麻煩，其實用一張圖片的話，就簡潔很多了，這里估計是為了重用圖片。

　　

 

　　2、方式不太對。

　　如果中間只有一個圖片的話，按照上面的XML布局就很簡潔了，但由於有三個圖片，這三個圖片都需要自適應窗口大小，所以才造成上面的XML代碼那么亂，那么有沒有優化的地方呢？

　　當然有，在《入門教程》里我們還有一個控件沒有介紹，那就是Container，顧名思義就是容器控件，容器控件有什么用呢？ 它的用處就是可以使子窗口的行為隨着Container一致變化。比如我們的窗口有10個按鈕，如果沒放在Container里的話，那么想要隱藏所有控件，就必須調用10次隱藏函數，如果想將所有控件往左移的話，也需要操作10次，同樣，上面因為有3個圖片，所以為了讓他們都適應窗口大小，我們做了3次布局。而如果這些控件都在Container里的話，那就方便多了，就算有100個按鈕，如果要隱藏的話，我們只需要調用1次隱藏函數，即隱藏Container控件即可，這樣它的子控件都會隱藏。同樣，如果把上面3個圖片都放到Container里去，我們的XML代碼就簡明多啦，優化后的代碼如下：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<Window size="800,520" sizebox="4,4,4,4" caption="0,0,0,32" mininfo="600,400">
    <VerticalLayout bkcolor="#FF070700">
        <HorizontalLayout height="40" />
        <HorizontalLayout>
            <VerticalLayout />
            <VerticalLayout width="336">
                <HorizontalLayout />
                <Container height="290">
                    <Control float="true" pos="0,0,0,0" width="336" height="230" bkimage="skin\bk_logo_light.png" />
                    <Control float="true" pos="1,1,0,0" width="336" height="164" bkimage="skin\bk_logo_image.png" />
                    <Control float="true" pos="84,38,0,0" width="168" height="20" bkimage="skin\bk_logo_text.png" />
                </Container>
                <HorizontalLayout />
            </VerticalLayout>
            <VerticalLayout />
        </HorizontalLayout>
        <HorizontalLayout height="50" />
    </VerticalLayout>
</Window>

　　可以看到bkimage都在一起了，HorizontalLayout、VerticalLayout 也不那么亂了，Container控件暫時就講到這里啦。

來自為知筆記(Wiz)