orbtk基础控件demo
orbtk目前内置的基础控件包括：
- TextBlock
- TextBox
- Button
- ToggleButton
- check_box
- Switch
- FontIconBlock
- ImageWidget
- WaterMarkTextBlock
Orbtk中所有的控件都使用create()方法创建，比如：
let btn=Button::create();
let text_block=TextBlock::create();
let grid=Grid::create();
控件创建后，可以通过链式调用的方法设置属性，比如：
let btn = Button::create() //创建button
.text("btn") //设置按钮文本
.font_icon(FontIcon::from(CHECK_FONT_ICON)) //设置按钮图标
.enabled(Enabled(true)); //设置是否可用
控件的属性大多都有默认值，比如：Button控件文本默认为"button"，enabled默认为可用等等。所以不设置属性，大多数控件都能正常显示。
暂时先不管每个控件可以设置哪些属性，现在我们先创建一个包含所有基础控件的简单demo，看看效果。
- 首先创建控件
- 然后把控件都添加到一个Stack布局控件内
- 把布局控件添加到一个Template内
- 创建窗口时，把Template设置为root
之所以把所有控件都放在一个布局控件内，是因为：
- 窗口的root只能是Template实例
- Template只能有一个child，如果多次添加子控件时，后添加的子控件会替代先添加的
代码如下：
use orbtk::*;
fn main() {
let mut application = Application::default();
//创建控件
let text_block = TextBlock::create().text("textblock");
let text_box = TextBox::create().text("textbox");
let water_mark_text_box = TextBox::create().water_mark(WaterMark::from("watermark..."));
let btn = Button::create().text("button");
let toggle_btn = ToggleButton::create().text("togglebutton");
let switch = Switch::create();
let check_box = CheckBox::create().text("checkbox");
let font_icon_block = FontIconBlock::create().font_icon(FontIcon::from(CHECK_FONT_ICON));
let image_widget = ImageWidget::create().image("src/bin/img/home.png");
let water_mark_text_block = WaterMarkTextBlock::create()
.text(String::new())
.water_mark(WaterMark::from("watermark..."));
//控件放入Stack布局控件，因为Template只能添加一个子控件
let layout = Stack::create()
.width(150.0)
.child(text_block)
.child(text_box)
.child(water_mark_text_box)
.child(btn)
.child(toggle_btn)
.child(switch)
.child(check_box)
.child(font_icon_block)
.child(image_widget)
.child(water_mark_text_block);
let root = Template::default().child(layout);
application
.create_window()
.bounds(Bounds::new(100.0, 100.0, 320.0, 260.0))
.title("OrbTk - Primitive Widgets-1")
.resizable(true)
.root(root)
//.debug_flag(true)
.build();
application.run();
}
当然，上述代码只是为了方便入门学习看代码，可以用更加Rustacean的方式写代码：
use orbtk::*;
struct MainView;
impl Widget for MainView {
type Template = Template;
fn create() -> self::Template {
Template::default().child(
Stack::create()
.max_width(150.0)
.child(TextBlock::create().text("textblock"))
.child(TextBox::create().text("textbox"))
.child(TextBox::create().water_mark(WaterMark::from("watermark...")))
.child(Button::create().text("button"))
.child(ToggleButton::create().text("togglebutton"))
.child(Switch::create())
.child(CheckBox::create().text("checkbox"))
.child(FontIconBlock::create().font_icon(FontIcon::from(CHECK_FONT_ICON)))
.child(ImageWidget::create().image("src/bin/img/home.png"))
.child(
WaterMarkTextBlock::create()
.text(String::new())
.water_mark(WaterMark::from("watermark...")),
),
)
}
}
fn main() {
let mut application = Application::default();
application
.create_window()
.bounds((100.0, 100.0, 320.0, 260.0))
.title("OrbTk - Primitive Widgets-1")
.resizable(true)
.root(MainView::create())
//.debug_flag(true)
.build();
application.run();
}
cargo run编译运行后显示窗口如下：
对比上一节可以发现，这些代码只是比helloworld增加了一个Stack布局控件，和一些控件。布局控件暂时先不管，本节我们就看一下，这些控件都应该怎么创建和使用？
orbtk控件通用方法
orbtk所有控件都是通过包装Template来实现的，控件的成员变量不可访问，控件的所有操作（包括设置属性）都只能通过调用成员方法来实现。
orbtk的控件包括一些通用方法和每个控件独有的方法。通用方法是所有的控件(包括布局控件)都有的方法，我们首先了解一下orbtk控件都有哪些通用方法：
- parent_type：设置控件是否能够添加子控件以及能够添加子控件的个数
- child：为控件添加子控件
- visibility：设置是否可见
- enabled：是否可用
- selector：设置css关联的选择器，class等
- margin：设置边距
- horizontal_alignment：设置水平对齐方式
- vertical_alignment：设置垂直对齐方式
- debug_name：设置控件的debug_name
- width：设置宽度
- height：设置高度
- size(width,height):设置宽度和高度
- min_width
- min_height
- max_size
- max_width
- max_height
- max_size
child()方法为控件添加子控件，当然有一些控件是不能添加子控件的，但是仍然有child方法，child方法的行为和parent_type有关。
parent_type方法设置控件是否能够添加子控件以及能够添加多少个子控件。parent_type方法的参数为ParentType枚举，有三个值
parent_type(ParentType::None)，则控件不能有子控件，调用child函数时会自动跳过，什么也不添加parent_type(ParentType::Single)，则控件只能添加一个子控件，如果已经有一个子控件，再添加控件则会覆盖/替换parent_type(ParentType::Multi)，则控件可以添加任意多个子控件
每个控件都有默认的parent_type，所以通常不需要调用这个方法。
visibility：设置是否可见，该方法的参数为Visibility枚举，有三个值：
Visibility::Visible：可见Visibility::Hidden：控件隐藏，但是控件仍然占据它所在的位置Visibility::Collapsed：控件隐藏，并且不占位置
enabled的用法非常简单：enabled(false)禁用控件，enabled(true)启用控件
selector是用于为控件设置css样式的。
TextBlock::create()
.selector(Selector::from("textblock").class("h1")) //设置控件的css选择器和class
margin设置控件的外边距，margin的参数可以是一个数值，也可以是元组，也可以是Margin实例。
- .margin(6.0):设置4个边距都为6，参数为f64类型
- .margin((6.0,3.0)):设置左右边距为6，上下边距为3
- .margin((1.0,2.0,3.0,4.0)):分别设置4个边距
- .margin(Margin::new()):使用Margin实例参数设置边距。
Margin实例可以set_left、set_right、set_top、set_bottom方法设置参数，这四个方法不支持链式调用。left、right、top、bottom四个方法可以获取参数值。
horizontal_alignment,vertical_alignment两个方法类似，分别设置控件在母控件内对齐方式。两个函数的参数都是Alignment枚举，有四个值，意义很明确就不解释了
- Alignment::Start
- Alignment::Center
- Alignment::End
- Alignment::Stretch
debug_name方法用于为控件分配一个名字，这个名字在窗口debug_flag设置为true时，在控制台打印控件树。
width，height等方法用于设置控件的大小。
下面几个方法，也是所有控件都有的。其中attach_shared_property,state,event_handler三个方法和事件处理有关，其他几个方法可以用于自定义控件，本节我们知道有这些方法即可，暂时先不管这几个方法怎么用。
- attach_property():附加一个property到控件
- attach_shared_property():附加一个shared property到控件
- state():为控件添加一个state.
- event_handler():为控件添加一个事件处理器
- render_object():为控件设置渲染对象
- layout():为控件添加布局方式
- constraint():重写控件包装的template的constraint。其实width,min_width,max_size等都是包装的constaint功能。所以通常不要用这个方法。
Orbtk基础控件的主要方法
TextBlock控件
TextBlock控件的功能就是显示文本，不能编辑，不能交互。
除了控件通用方法外，TextBlock的方法还有：
- text()：设置文本内容
TextBlock::create().text("textblock")
WaterMarkTextBlock控件
WaterMarkTextBlock控件类似TextBlock，但是在文本为空的时候显示WaterMark的内容。
WaterMarkTextBlock控件的方法有：
- text
- water_mark
WaterMarkTextBlock::create()
.text("")
.water_mark("wartermark...")
TexBox控件
TextBox是一个文本框，可以交互输入。主要方法有：
- text:文本框中的文字
- water_mark：文本框中没有文字是显示watermark
- padding：设置内边距
- focused：光标是否在当前控件
- text_selection：设置选中的文本
- on_key_down：键盘按下添加事件处理函数
text和water_mark的参数都是字符串。
padding的参数可以是一个数值，也可以是元组，也可以是Padding实例。
- .padding(6.0):设置4个边距都为6，参数为f64类型
- .padding((6.0,3.0)):设置左右边距为6，上下边距为3
- .padding((1.0,2.0,3.0,4.0)):分别设置4个边距
- .padding(Padding::default()):使用Padding实例参数设置边距。
Padding只能用default()方法创建实例，分别用set_left、set_right、set_top、set_bottom方法设置参数，这四个方法不支持链式调用。left、right、top、bottom四个方法可以获取参数值。
focused的参数为bool类型。
text_selection((start_index: usize, length: usize))的参数分别为第一个字符位置和文本长度。
on_key_down方法本节我们暂时不管。
TextBox::create()
.water_mark("watermark...")
.padding((6.0,3.0))
.focused(true)
.enabled(true)
.text_selection((2,4))
目前TextBox还不能用小键盘输入。
Button控件
Button控件是个按钮控件，ToggleButton是一个开关型按钮。支持的方法有：
- text：设置按钮上的文本
- font_icon：设置按钮上的图标
- pressed：设置按钮是否按下
- on_click：添加鼠标点击事件处理函数
用法非常简单，参考如下代码
Button::create()
.text("btn")
.font_icon(CHECK_FONT_ICON))
.pressed(true)
font_icon的参数实际上是一个字符，也可以这样用：.font_icon("")。CHECK_FONT_ICON是一个内置的常量，也是一个字符。
checkbox
checkbox支持的方法有：
- text：文本
- font_icon:选中时复选框内显示的图标，默认为√
- selected：是否选中
用法也非常简单：
CheckBox::create()
.text("checkbox")
.font_icon(FLOPPY_FONT_ICON)
.selected(true)
Switch控件
witch控件支持的方法有：
- Selected：是否为打开状态
用法同checkbox
Image控件
ImageWidget用于显示图片，支持的方法有：
- image:设置图片路径
ImageWidget::create()
.image("src/bin/img/home.png")
FontIconBlock控件
FontIconBlock显示一个FontIcon图标，图标为font内的特殊字体。支持的方法有：
- font_icon:设置图标
该方法的参数实际上是一个&str，所以可以这样用：
FontIconBlock::create().font_icon("")
demo
我们应用控件的方法，重新创建一些控件看看
//! rust orbtk primitive widgets with properties
use orbtk::properties::Visibility;
use orbtk::*;
struct MainView;
impl Widget for MainView {
type Template = Template;
fn create() -> self::Template {
Template::default().child(
Stack::create()
.max_width(140.0)
.child(
TextBlock::create()
.text("textblock")
.visibility(Visibility::Hidden),
)
.child(TextBox::create().text("textboxfocused").focused(true))
.child(TextBox::create().text("textboxdisabled").enabled(false))
.child(TextBox::create().water_mark("textboxwatermark..."))
.child(Button::create().text("button").margin((0.0, 2.0)))
.child(
Button::create()
.text("primary button")
.margin((0.0, 2.0))
.selector(Selector::from("button").class("primary")),
)
.child(
Button::create()
.text("button with icon")
.margin((0.0, 2.0))
.font_icon(FontIcon::from(CHECK_FONT_ICON)),
)
.child(
ToggleButton::create()
.text("togglebuttontoggled")
.margin((0.0, 2.0))
.pressed(Pressed(true)),
)
.child(Switch::create().selected(true))
.child(
CheckBox::create()
.text("checkbox with icon")
.font_icon(FontIcon::from(FLOPPY_FONT_ICON)),
)
.child(FontIconBlock::create().font_icon(FontIcon::from(CHECK_FONT_ICON)))
.child(FontIconBlock::create().font_icon(FontIcon::from("")))
.child(ImageWidget::create().image("src/bin/img/home.png"))
.child(
WaterMarkTextBlock::create()
.text(String::new())
.water_mark(WaterMark::from("WaterMarkTextBlock...")),
),
)
}
}
fn main() {
let mut application = Application::default();
application
.create_window()
.bounds((100.0, 100.0, 300.0, 400.0))
.title("OrbTk - Primitive Widgets with properties")
.resizable(true)
.root(MainView::create())
//.debug_flag(true)
.build();
application.run();
}
编译运行后效果如下：
本文代码
本文代码在https://github.com/hustlei/RustGuiOrbtkTutorial
可以使用下面命令编译运行
cargo run --bin primitive_widgets
cargo run --bin primitive_widgets2
文章分类：rust语言Orbtk GUI库入门
扫一扫
4840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
