DDuilib入门-设计出Delphi Align属性布局【三】

前言

编写此篇主要是让delphier能更容易理解duilib中的布局，并不是要把delphi的思想带入到duilib中。

先前声明：当属性值的width、height、pos为空时，则自动时行调整

一、alLeft

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="318,126">    <VerticalLayout>        <VerticalLayout width="100" bkcolor="#FF00FF00" />    </VerticalLayout></Window>

最简单的一个，约束宽度即可。

二、alRight

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="283,118">    <VerticalLayout>        <HorizontalLayout height="60">            <VerticalLayout />            <VerticalLayout width="81" bkcolor="#FF00FF00" />        </HorizontalLayout>    </VerticalLayout></Window>

多添加了一个HorizontalLayout弄成了居顶右，其HorizontalLayout中第一个VerticalLayout用来占居第二个VerticalLayout约束后的宽度。

三、alTop

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="283,118">    <VerticalLayout>        <HorizontalLayout height="30" bkcolor="#FF00FF00" />    </VerticalLayout></Window>

约束其高度，使之第一个置顶。

四、alBottom

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="283,160">    <VerticalLayout>        <HorizontalLayout />        <HorizontalLayout height="60" bkcolor="#FF00FF00" />    </VerticalLayout></Window>

使用两个HorizontalLayout，第一个HorizontalLayout占居第二个HorizontalLayout约束后的高度。

五、alClient

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="283,160">    <VerticalLayout>        <HorizontalLayout bkcolor="#FF00FF00" />    </VerticalLayout></Window>

去掉所有width, height, pos约束，形成一个占所父layout的所有空间。

六、Center (FireMonkey中才有此属性)

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window size="283,160">    <VerticalLayout>        <HorizontalLayout />        <HorizontalLayout height="38">            <VerticalLayout />            <VerticalLayout width="30" bkcolor="#FF00FF00" />            <VerticalLayout />        </HorizontalLayout>        <HorizontalLayout />    </VerticalLayout></Window>

见第入门第二篇。

ps: 以上所有都是基于Layout的，其实一个控件也可以看作是一个Layout, 只是多了个float属性（表示使用绝对定位），将其float属性设置为false后是一样的效果。