前言
本次内容接上回《rust原生跨平台GUI框架——iced》，最近突然涌现出多个Rust的UI框架，真实令人兴奋，同时也突出了Rust的勃然生机，我将尽量为大家介绍Rust领域的UI框架，带大家体验Rust领域的好玩意儿。
Frui是一个对开发者相当友好的UI框架，它使得开发者构建用户界面变得简单，并且是一个真正意义上受Flutter启发、用纯Rust写的UI框架。如果你了解Flutter，或者Vue/React的话，学习这些东西将会变得很容易，但是如果你并不了解，还是建议你去学习基础内容，并且推荐一本书《Flutter实战·第二版》，读者可以在Github上自行搜索。本期内容还是老规矩，写个Counter的Demo来看看。
由于Frui现在刚发行第一版，所以要求不是很高，本期内容主要体验其编码方式。
一、新建项目
1. 创建项目
这里依旧还是我们的老规矩，创建一个Counter的Demo项目。
cargo new gui_frui_001
2. 导入idea
使用idea打开刚才创建的项目
3. 引入依赖
在Cargo.toml中导入依赖
frui = "0.0.1"
4. 执行案例代码
将以下代码复制到main.rs
#![feature(min_specialization)] #![feature(type_alias_impl_trait)] use frui::prelude::*; #[derive(ViewWidget)] struct App; impl ViewWidget for App { fn build<'w>(&'w self, _: BuildContext<'w, Self>) -> Self::Widget<'w> { Center::child(Text::new("Hello, World!")) } } fn main() { run_app(App); }
然后idea就会报错
因为我用的是稳定版的Rust，因此一些特性是没有的，所以要安装nightly版本的Rust，直接执行以下代码
rustup toolchain install nightly
然后列出当前Rust的版本
rustup toolchain list
现在激活nightly版本的编译器
rustup default nightly
接下来去项目目录覆盖配置文件
rustup override set nightly
此时idea还会提示错误的，这是因为nightly没有源码，插件默认用的stable的源码，所以检查语法出错了，不必管他，直接运行
如果你也运行了下面的窗口，说明你已经配置成功了。
二、实现计数器Demo
1.导入资源
在实现Counter Demo之前，我们需要导入框架所需要的资源，我发现其框架并未打包UI相关的资源，要是和Flutter那样可以直接用Material的UI就太好了，我觉得以后可能会出类似的。
首先需要从Github上的frui-main\examples复制出misc文件夹到我们项目的目录来，
可以看到这个版本目前只提供了按钮和开关，还有State，到现在为止，框架相关的内容都已经导入完毕。
2.编写窗口代码
Frui的代码和Flutter是高度相似的，从编写窗口代码这里就可以看出来。首先要做的就是先定义窗口State，这里我们定义了CrabCounter，并且实现WidgetState，并且给一个整数型的State，特别重要的是一定要写create_state方法，初始化State。
#[derive(ViewWidget)] struct CrabCounter; impl WidgetState for CrabCounter { type State = isize; fn create_state(&self) -> Self::State { 0 } }
接下来就是要编写窗口，实现窗口逻辑。在这里给Crab Counter实现了ViewWidget特质，其必须要实现一个build方法，返回构建的窗口，其代码如下
impl ViewWidget for CrabCounter { fn build<'w>(&'w self, ctx: BuildContext<'w, Self>) -> Self::Widget<'w> { Column::builder() .space_between(60.0) .main_axis_size(MainAxisSize::Max) .cross_axis_size(CrossAxisSize::Max) .main_axis_alignment(MainAxisAlignment::Center) .cross_axis_alignment(CrossAxisAlignment::Center) .children(( Text::new(format!("{} 🦀", *ctx.state())) .size(100.0) .weight(FontWeight::BOLD), Row::builder() .space_between(10.0) .children(( Button { label: Text::new("+").size(30.), on_click: || *ctx.state_mut() += 1, }, Button { label: Text::new("-").size(30.), on_click: || *ctx.state_mut() -= 1, }, )), )) } }
以上代码的布局是这个样子的
要注意的是，Button 至少需要传入两个参数，一个是按钮的标签——Text，当然也可以是Image，目前并不清楚它是否有这个组件了，所以还是按官方的来，直接用Text；一个是点击的回调函数，
3. 运行效果
此时我们运行Counter程序，如果运行没有错误，那应该是下面这个样子的
上面的Text部分，左边是计次的数字，右边是Rust的吉祥物🦀，下面是两个按钮，一个+，一个-
Rust的吉祥物是🦀，而非图中白色的样子，官方给出的运行结果应该是下面这个样子的
Rust是支持这种文本的，但是不知道为什么表现出来和官方给的案例是不一样的。
总结
本期学习了另一个由纯Rust写的UI框架——Frui，这是一个对开发者相当友好的框架，借鉴于Flutter，可惜是刚起步的框架，相信其在以后的发展肯定会变得更好。
Frui框架的路子是学习Flutter的，其代码也是高度相似，代码也容易理解，确实做到了对开发人员友好，这是非常值得肯定的，学习过Flutter的人甚至可以直接迁移过来，不需要学习太多的内容，降低了学习成本。但是该项目还处在刚开始阶段，我觉得可以关注一手，该框架如果做完，可能是Rust的主流框架。此外，这个Counter还不支持点关闭按钮来关闭窗口，我觉得这可能是因为没有实现关闭按钮的代码导致的，后续随着该项目的发展，会补齐这部分内容。
比较起上期的UI框架——Iced，其架构思想与Flutter也是高度相似，与Frui不同的是，Iced主要借助于一个Sandbox，但是其编程手法是对开发者比较有好的。在我的体验中，主要遇到的是文档版本错乱，不支持中文，所以导致体验很差。我在别的博主下面看到Iced是支持中文的，但是我加中文就乱码，目前还不清楚是什么问题。
完整代码
counter的完整代码
use frui::prelude::*; use rand::Rng; /// This widget will display a different number every time its state is lost. #[derive(ViewWidget)] pub struct RandomState; impl WidgetState for RandomState { type State = usize; fn create_state<'a>(&'a self) -> Self::State { rand::thread_rng().gen() } } impl ViewWidget for RandomState { fn build<'w>(&'w self, ctx: BuildContext<'w, Self>) -> Self::Widget<'w> { Text::new(ctx.state().to_string()) } } /// This widget will display a different number every time it gets rebuilt. #[derive(ViewWidget)] pub struct ChangesOnRebuild; impl ViewWidget for ChangesOnRebuild { fn build<'w>(&'w self, _: BuildContext<'w, Self>) -> Self::Widget<'w> { Text::new(rand::thread_rng().gen::<usize>().to_string()) } }
此处附上Flutter的Counter代码，读者可观察其异同，至于Flutter做开发的好处，只有当读者真正去用的时候才会体会到了。
class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( '点击按钮的次数:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), ), ); } }
