rust语言orbtk GUI基础(old2018)-1.orbtk入门

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

rust语言GUI库简述

rust目前已经有非常多的GUI方案，大多数是绑定的其他语言编写的库，如gtk绑定，qt绑定等等。

如果想看有哪些GUI库可以参考：

• https://github.com/rust-unofficial/awesome-rust
• https://crates.io/crates/gui

个人比较推荐2个：

1. rust qt绑定：qt功能强大，跨平台，足以满足各种需求
2. orbtk：rust语言编写的操作系统redox项目的GUI方案，完全使用rust实现，跨平台

orbtk简介

orbtk是redox(rust语言操作系统)项目组开发的，redox的gui用的就是orbtk。orbtk是跨平台的gui，不仅支持Redox OS，还支持Linux, macOS, Windows系统。

orbtk的特点：

• 类似Flutter, React, Redux的API
• 使用DECS库(Entity Component System library DCES)操作控件(widget)和属性(properties)
• 更新而不是重建(rebuild)控件树
• 弹性的事件系统
• 控件状态管理
• CSS 主题，可以使用css修改控件样式

orbtk基于SDL2，所以依赖SDL2库。

orbtk的开发受到了Flutter、React、Yew等的启发，所以API与这些库有些类似。目前(2018)orbtk还有很多功能不完善，正在开发中，根据官网，orbtk未来计划如下：

• 编写书籍
• 样式指南(还没弄清楚是个功能还是出书)
• 更多的默认控件(widgets)
• 更多的示例
• 动画
• 运行时修改views / widgets / screens
• application分割到不同的模块
• 升级Theme
• 支持Android, iOS and WebAssembly
• 支持Vulkan / OpenGL

目前，不支持运行时修改widgets，这是硬伤啊，所以只能用在比较简单的GUI上，希望能尽快增加。

最简单的orbtk GUI窗口

创建工程

首先新建一个rust应用程序工程

1. cargo new orbtkgui：创建一个orbtkgui工程
2. cd orbtkgui:进入工程目录

然后，在cargo.toml中添加orbtk依赖

[dependencies]
orbtk = "0.2.27"

如果想用最新的orbtk版本，可以在cargo.toml的dependencies行添加如下代码：

orbtk = { git = https://gitlab.redox-os.org/redox-os/orbtk.git }

OrbTk 0.3.0版本进行了重新开放，和以前的版本不兼容

然后，在main.rs中输入如下代码：

use orbtk::*;

fn main() {
    let mut application = Application::default();

    application
        .create_window()
        .with_bounds(Bounds::new(100, 100, 640, 420))
        .with_title("OrbTk - simple gui")
        .with_root(Template::default())
        .build();
    application.run();
}

cannot find -lSDL2错误

第一个orbtk gui项目已经创建完成，使用cargo run编译运行，我们会发现，没法编译，出现如下错误：

 note: ld: cannot find -lSDL2

这是因为orbtk使用SDL进行图形界面绘制，所以必须安装SDL2库。

安装SDL2

在msys2中可以直接pacman -S sdl2安装。

如果没有使用msys2，可以直接下载安装。

设置环境变量

orbtk项目在运行时需要SDL2.dll，在编译时需要链接SDL2.lib（或者SDL2.a）。所以需要把SDL2.dll的目录添加到path环境变量。把SDL2.lib目录添加到LIBRARY_PATH环境变量。

不想设置环境变量的同学，也可以在命令行输入如下脚本设置当前命令行环境。

set path=C:\msys64\mingw64\bin;%path%
set LIBRARY_PATH=C:\msys64\mingw64\lib

本人用的windows系统，非win系统类似

用msys2的同学切记，在msys2 shell里用 LIBRARY_PATH=/C/msys64/mingw64/lib是不行的。因为msys2中gcc时在windows下运行的，不是在msys2 shell内。可以把set LIBRARY_PATH=C:\msys64\mingw64\lib添加到msys2_shell.cmd中，在启动msys2时设置环境变量。

编译运行

ok，所有工作完成了，cargo run我们就可以看到一个空白的窗口了。

代码说明

代码很简单

第一句use orbtk::*;引用orbtk库

main函数中let mut application = Application::default();创建一个application对象

main函数中

    application
        .create_window()
        .with_bounds(Bounds::new(100, 100, 640, 420))
        .with_title("OrbTk - simple gui")
        .with_root(Template::default())
        .build();

• .create_window()创建了一个WindowBuilder对象
• .build()使用windowbuilder对象的properties创建window对象和window内的widget tree(控件数)
• .with_bounds(), .with_title(), .with_root()分别设置窗口大小、窗口标题、和窗口的根控件

.with_title()其实和.title="title string"是相同的，所以.with_bounds(), .with_title(), .with_root()三个函数顺序可以随意调整。我们可以看看源码：

pub fn with_bounds(mut self, bounds: Rect) -> Self {
    self.bounds = bounds;
    self
}

windowbuilder的.with_xxx()函数的定义都类似。就是设置的property的值，然后返回self，方便链式调用。windowbuider主要设置属性的函数有：

with_bounds(mut self, bounds: Rect):设置窗口大小和位置
with_title<S: Into<String>>(mut self, title: S)：设置窗口标题
with_theme(mut self, theme: Theme)：设置css样式，theme实际上是一个包含css样式的字符串
with_root(mut self, root: Template)：设置窗口的根控件，orbtk的所有控件(button,combox等)都是Template
with_debug_flag(mut self, debug: bool)：设置是否为debug模式，debug为true时，会在命令行控制台显示调试信息

最后一句application.run();渲染并启动消息循环。

本文代码

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

可以使用cargo run --bin start命令编译运行