Duilib教程－自动布局3－分隔条

先看一个经常使用的图，以下：

 

左边是导航栏，右边是信息区。

中间能够自由拉伸。

XML以下：

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

<Window size="695,542">

    <HorizontalLayout width="695" height="542" bkcolor="#FFA0A0A4">

        <HorizontalLayout width="200" bkcolor="#FF008080" sepwidth="6" sepimm="true" />

        <HorizontalLayout bkcolor="#FFA6CAF0" />

    </HorizontalLayout>

</Window>

 

sepwidth 全称为 seperator width，分隔条的宽度。这个值分正值、负值，正值表示分隔条在右边，负值表示分隔条在左边。

 

sepimm 全称为 separate immediately，当即拉伸，即鼠标一移动，立刻就设置LAYOUT的大小。

 

DUILIB彷佛有一个BUG，就是当左边被拖到宽度为0时，它为自动还原为原始大小。为了解决这个BUG，咱们须要设置它的最小宽度，minwidth=”1”，这样BUG就不存在了咯。

 

解决这个BUG的时候，你也已经知道，如何限制左边的LAYOUT的大小了吧，maxwidth，若是设置了这个属性，指定了最大宽度，那它就会限制在必定大小了。如下的XML，读者可做测试：

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

<Window size="695,542">

    <HorizontalLayout width="695" height="542" bkcolor="#FFA0A0A4">

        <HorizontalLayout minwidth="50" maxwidth="300" width="200" bkcolor="#FF008080" sepwidth="6" sepimm="true" />

        <HorizontalLayout bkcolor="#FFA6CAF0" />

    </HorizontalLayout>

</Window>

 

这里要说明一个很是重要的规则：

若是分隔条是竖条的，｜，那分隔条属性为sepwidth，它的LAYOUT必须是HorizontalLayout，即水平布局，由于只有水平布局被水平拉伸才是合理的。

若是分隔条是横条的，一，那分隔条属性为sepheight，它的LAYOUT必须是VerticalLayout，即垂直布局，由于只有垂直布局被垂直拉伸才是合理的。

 

因此，在上面的XML中，若是你将左边的LAYOUT换成VerticalLayout，你会发现分隔条无效，由于VerticalLayout根本没有sepwidth属性。

 

在设置横条的分隔条时，须要设置minheight、maxheight属性，这样便于控制其大小。sepheight为正时，表示分隔条在下方，为负时，表示在上方。

 

下面我贴一个拥有上下、左右分隔条的XML，同时包含正负值。

 

XML:

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

<Window size="695,542">

    <HorizontalLayout width="695" height="542" bkcolor="#FFA0A0A4">

        <HorizontalLayout sepwidth="5" sepimm="false" minwidth="50" maxwidth="300" width="137" bkcolor="#FF008080" />

        <VerticalLayout>

            <VerticalLayout bkcolor="#FF103A78" />

            <VerticalLayout bkcolor="#FF5D4425" minheight="50" sepheight="-5" sepimm="true"/>

        </VerticalLayout>

    </HorizontalLayout>

</Window>