duilib 子窗口位置_duilib入门简明教程 -- 界面布局(9) （转）

效果如图：

可以看到整个最小化按钮都被拉伸了，其中两边的矩形色块是因为图片的边框也被拉伸了。

我们再加上最大化按钮和关闭按钮，XML如下：

效果如图：

可以发现三个按钮被均匀拉伸了。

但是我们显然不想让按钮被拉伸，怎么办呢？

还记得前面说的占位布局吗？因为我们想让按钮显示到右边，所以我们要占住左边的部分。 那我们加一个占位试试。

不过，

(1)亲们知道这个占位要加到哪一行么？

当然是加到按钮的上面！ 那我们加到按钮上面试试。

(2)亲们知道这个占位布局用还是么？

其实我也不知道，那咱们就试试吧。

先加个玩玩，XML如下：

效果如图：

(其实换成VerticalLayout等任何CControlUI，效果都是一样的)

果然占到了左边的部分，但是为什么还是均分呢，怎么让它只占用左边的一大部分呢？

这就是width的用处了， 我们给HorizontalLayout 加上一个属性 width = "600"，可以看到如下效果：

好家伙，果然有用！

下一步我们再把width加大一点，应该就可以让按钮正常了吧？

先别急着管大小，我们先拖动一下窗口大小，或者点击最大化按钮~

是不是有新问题啦？ 为什么按钮还是被放大了呢？

因为我们给HorizontalLayout加上了width属性，那么在水平方向，它就失去自适应效果啦，因为宽度永远是前面指定的600.

那怎么样才能让按钮不被放大呢？

很显然，不应该给左边的占位布局HorizontalLayout 指定width属性，而应该给右边的按钮指定width属性。

但是按钮有 width属性吗？

按钮是有，但是我们应该添加一个占位布局 HorizontalLayout  来指定width属性。 XML如下：

效果如图：

现在窗口大小怎么变，按钮都不会被拉伸啦，恭喜小伙伴们~

可以看到那3个Button节点都被放到了HorizontalLayout 节点下，下面是时候讲一下布局了：

其实duilib整个界面都是由各种布局组成，我们把上面的XML简化一下，就是下面这样子：

很明显，最外层是整个窗口的布局，之后又包含了一个 布局(即标题栏)，

再里面又包含了两个HorizontalLayout布局，所以一切框架和位置都是由布局决定。

这里先简要介绍一下duilib的UI设计器：

1、在duilib源码的bin目录下，【DuiDesigner.exe】就是UI设计器啦。

2、把XML拖拽上去即可直接看到界面效果，

我们把前面那个完整的XML拖进去，即可看到如下效果：

红色边框围起来的就是一个个HorizontalLayout 等布局啦~

7、调整按钮的位置和大小。

虽然已经将按钮显示到最后边，但是按钮沾满了右边部分，我们现在把他们的高度调小一点：

给Button节点都加上属性 height ="20",效果如图：

嗯，效果看起来还行。

再加上width="23"属性，效果如图：

那怎么样让按钮不挨着顶部呢？

前面介绍过float属性，是用于绝对定位，由于现在按钮的位置都是由布局自动调整的，所以没办法调节位置，如果不想让布局自动调整位置，就要加上float="true"，这样就可以自己指定位置啦。我们给最小化按钮加上 float="true" pos="0,5,22,24" 试试，效果如图：

额，最小化按钮哪里去了~~~

虽然最小化按钮使用了绝对定位，但是其他两个按钮还是自动布局，所以需要给他们也加上，XML如下：

效果如图：

对比一下上个教程完整的图片：

发现我们这个这个图有点不对，三个按钮的中间的线有点粗~

这是因为图片画的不对(这些图片是Alberl早几年画的，用于MFC，所以并没有考虑duilib)，可以把最大化按钮两边的边框都去掉，这样就OK啦~

不过呢，没必要那么做，我们恰好可以再学习一点新知识~

我们可以看到，虽然给关闭按钮指定的宽度也是23，但是它却比其他按钮大。  这说明width属性已经失效了，这是因为我们在pos属性里面已经指定了位置大小，它会优先以pos属性为准，那么显然height属性也失效了。(感谢网友【糖加三勺】的提醒，Alberl的这个说法有误，重新试了一下，如果pos属性放在后面，就会以pos为准，height属性放在后面就会以height为准，并不是属性失效。)

回到刚刚那个按钮图片的问题，由于每个按钮图片都画了边框，所以会有加在一起就有两个边框了，所以中间的线有点粗，那么我们现在可以将最大化、关闭按钮往左边移动一个像素。

效果如图：

嘿嘿，好了吧~

但是这个关闭按钮貌似有点宽~

我们当然可以再次调整pos属性，但是这不科学~~

还记得失效的那两个属性么？

那是因为pos属性的后面两个值都填了非0值，所以导致那两个属性失效，下面我们把pos后面的两个值改为0试试。

可以发现那两个属性又生效啦~(感谢网友【糖加三勺】的提醒，Alberl的这个说法有误，重新试了一下，如果pos属性放在后面，就会以pos为准，height属性放在后面就会以height为准，并不是属性失效。)

现在只要去掉width、height属性中的一个，按钮都会不见了，Alberl以为按钮的大小会调整成图片的大小呢~~~

看来只能指定宽度和高度了(为了方便后期的位置调整，建议pos属性后面两个值填0，使用width/height属性来指定按钮大小)

这几个图片的宽高分别是19 * 23、19*28，所以就手动指定了，XML如下：

效果如图：

(上面的XML里，Button的父节点HorizontalLayout 换成 VerticalLayout也是一样的效果，所以有时候他们是没有什么分别的，不过个人的理解应该是要交叉使用的)

好啦，最关键的布局部分讲完啦，另外，在duilib的官方群里，有共享一个布局案例，Alberl已整理出来【duilib入门和xml培训 布局案例.rar】，那里有9个布局案例，相信看完本教程的讲解之后，再看看那9个XML布局，应该就很熟悉布局啦，如果还有不懂的话，请留言~