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="skink_logo_light.png">
                <HorizontalLayout />
                <HorizontalLayout height="164" bkimage="skink_logo_image.png">
                    <HorizontalLayout>
                        <VerticalLayout />
                        <VerticalLayout width="168">
                            <VerticalLayout height="40" />
                            <VerticalLayout height="20" bkimage="skink_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="skink_logo_light.png" />
                    <Control float="true" pos="1,1,0,0" width="336" height="164" bkimage="skink_logo_image.png" />
                    <Control float="true" pos="84,38,0,0" width="168" height="20" bkimage="skink_logo_text.png" />
                </Container>
                <HorizontalLayout />
            </VerticalLayout>
            <VerticalLayout />
        </HorizontalLayout>
        <HorizontalLayout height="50" />
    </VerticalLayout>
</Window>

　　可以看到bkimage都在一起了，HorizontalLayout、VerticalLayout 也不那么乱了，Container控件暂时就讲到这里啦。

来自为知笔记(Wiz)