rust语言orbtk GUI基础(old2018)-3.2 orbtk布局控件

orbtk的api在2019.2进行了修改，该文章为2018版
新版请转[新版orbtk gui基础]

orbtk布局控件

orbtk 0.3版支持的布局控件主要有：

• Container：容器，只能有一个子控件，可以使用PaddingLayout定位子控件
• Center
• Row：行控件
• Column：列控件
• Spacer：在Row或Column内创建空区域
• Stack：子控件在z方向上层叠

其中：Container,Center是只能放一个子控件的容器，Spacer是个占位符，调整多个控件间空隙的。Center和Spacer事实上都可以用样式实现。

只有Row,Column,Stack算是真正的布局控件。

Container

Container容器为子控件四周增加padding边框。

Container容器只能有一个子控件。

Container::create().with_child(TextBlock::create())
    
Container::create()
    .with_child(TextBlock::create())
    .with_property(Padding::default().with(20))
    
Container::create()
    .with_child(TextBlock::create())
    .with_property(Padding::default().with_lefts(20))

Center

Center容器也只能有一个子控件，Center会将子控件距中显示。

Center::create().with_child(TextBlock::create())

目前Center貌似不能起作用，建议使用css样式实现center效果，不用Center控件。

Row和Column

Row将子控件显示在一行内，Column将子控件显示在一列内。

Row::create()
    .with_child(TextBlock::create())
    .with_child(TextBlock::create())
    
Column::create()
    .with_child(TextBlock::create())
    .with_child(TextBlock::create())

Row和Column可以相互包含，形成表格状布局

spacer

Spacer是一个不显示任何内容的占位符，通常可以用于Row或者Column两个子元素之间。

Row::create()
    .with_child(TextBlock::create())
    .with_child(Spacer::create())
    .with_child(TextBlock::create())

Spacer的css选择器为spacer。Spacer默认的css样式为：

spacer {
    width: 4;
}

Stack

Stack的子控件会重叠在一块显示，比如两个TextBlock子控件，一个是"text"，一个是"—"，则两者叠加后就显示加删除线的"text"。

Stack::create()
    .with_child(TextBox::create())
    .with_child(TextBlock::create())
    .with_child(TextBlock::create().with_property(Label::from("~~~~~~~")))

本文代码

本文代码在https://github.com/hustlei/RustGuiOrbtkTutorial

可以使用下面命令编译运行

cargo run --bin layout