控件布局Layout

在用户界面（UI）设计和开发中，Layout（布局） 是用户界面结构的基础，其作用是将界面上的各种元素（如文本、图片、按钮、输入框等）按照一定的规则进行排列和分布，使界面内容清晰、有条理。

引入Layout类

在WUI的Basic库中，提供了VBoxLayout, HBoxLayout, FormLayout, Alignment这几个模块，帮助我们完成UI控件布局。

import { Desktop, VBoxLayout, HBoxLayout, Button, FormLayout, Edit, Alignment, TextEdit, ComboBox, SpinEdit } from 'wui.basic';
import "./theme";

使用Layout

接下来，我们使用这几个模块实现下面的布局，从外向内来看，在最外面是一个垂直布局VBoxLayout，该布局的内侧与其内部所有控件留有一定的间隙。在该布局内，依次添加两个水平布局HBoxLayout，一个表格布局FormLayout，以及一个基础控件textEdit。

使用VBoxLayout实现整体布局排列

创建一个垂直排列布局，并在该布局的四周内留有20px宽的空白间隙。

const desktop = Desktop.instance();
const mainLayout = new VBoxLayout(desktop);

mainLayout.css = { padding: '20px' };

使用HBoxLayout添加一个水平布局

我们为上面定义的mainLayout添加一个水平布局，并定义外观为Panel，使其看起来是一个面板。

然后在这个布局内添加四个button类型控件，这些控件会依次从左到右水平排列。

{
    // 使用HBoxLayout添加一个水平布局
    const hLayout = new HBoxLayout(mainLayout);
    // 将这个水平布局的外观定义为Panel类型
    hLayout.addClass('Panel');
    mainLayout.setStretch(hLayout, 0);

    const button1 = new Button(hLayout, 'Button 1');
    // 设置这个button在水平方向占据的空间比例
    hLayout.setStretch(button1, 1);
    const button2 = new Button(hLayout, 'Button 2');
    hLayout.setStretch(button2, 2);
    const button3 = new Button(hLayout, 'Button 3');
    hLayout.setStretch(button3, 2);
    const button4 = new Button(hLayout, 'Button 4');
    hLayout.setStretch(button4, 3);
}

使用FormLayout添加一个表格布局

接下来我们在一个新的水平布局中添加一个表格布局，表格布局是一个双列的垂直布局，左列是控件名称，右列是控件本身。

我们还可以使用setAlignment函数，指定这个表格布局在该水平布局中的对齐方式，比如上对齐。

{
    const hLayout = new HBoxLayout(mainLayout);
    hLayout.addClass('Panel');

    const formLayout = new FormLayout(hLayout);
    formLayout.addItem('Line 1:', new Edit());
    formLayout.addItem('Line 2:', new Edit());
    formLayout.addItem('Line 3:', new Edit());
    mainLayout.setAlignment(formLayout, Alignment.Top);

    new TextEdit(hLayout);
}

支持以下五种对齐方式：

declare enum Alignment {
    Top = 0,
    Bottom = 1,
    Left = 2,
    Right = 3,
    Center = 4
}