什么是 Ratatui Kit?
Ratatui Kit 是一个基于 ratatui 的 Rust 终端 UI 组件化开发框架。它借鉴了 React 的组件模型,将组件、props、hooks 等理念引入终端 UI,让开发变得高效、可组合、易维护。
主要特性
- 组件化开发,支持 props、hooks、生命周期等机制
- 支持 use_state、use_future、use_events 等常用 hooks
- 异步渲染,适配 tokio 生态
- 易于扩展和自定义
- 适合构建复杂、可维护的终端 UI 应用
适用场景
- 快速开发终端 UI 工具、仪表盘、交互式 CLI 应用
- 希望在 Rust 生态下体验类似 React 的开发范式
- 需要异步、响应式的终端界面开发能力
Ratatui Kit 与 ratatui 的区别
ratatui 是专注于终端渲染和基础组件的底层库,提供了强大的终端 UI 能力。而 Ratatui Kit 在此基础上,进一步抽象出高层的组件模型和开发范式,让 UI 结构更清晰、代码更易维护。你既可以直接调用 ratatui 的底层能力,也可以用 Ratatui Kit 的组件体系高效搭建应用。
为什么选择 Ratatui Kit?
- 像写 React 一样开发终端 UI,享受组件化、响应式开发体验
- 更快地构建复杂、可维护的终端应用
- 支持异步渲染和事件处理
- 现代化 Rust 终端 UI 解决方案
- 高度可扩展、可自定义
快速开始
想体验 Ratatui Kit?下面带你一步步完成环境准备和第一个组件开发。
1. 安装依赖
首先,确保你已经安装了 Rust 环境。如果没有,可以访问 Rust 官网 按提示安装。
然后,在你的项目目录下运行:
sh
cargo add ratatui-kit
如果你需要路由、全局状态等高级功能,可以在 Cargo.toml
里这样配置:
toml
ratatui-kit = { version = "*", features = ["router", "store"] }
2. 创建第一个组件
Ratatui Kit 的组件和 React 很像。你只需用 #[component]
宏标记一个函数,就能定义自己的 UI 组件。
比如,下面是一个每秒自增的计数器:
rust
#[component]
fn Counter(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
// 用 use_state 管理本地状态
let mut state = hooks.use_state(|| 0);
// 用 use_future 实现每秒自增
hooks.use_future(async move {
loop {
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
state += 1;
}
});
// 用 element! 宏声明式渲染 UI
element!(
Border(
flex_direction: Direction::Vertical,
justify_content: Flex::Center,
){
View(height: Constraint::Length(1)){
$Line::styled(
format!("Counter: {state}"),
Style::default().green().bold(),
)
.centered()
.bold()
}
}
)
}
3. 启动应用
在 main
函数里调用你的组件,应用就能跑起来了:
rust
#[tokio::main]
async fn main() {
element!(Counter)
.fullscreen()
.await
.expect("Failed to run the application");
}
这样,终端里就会显示一个每秒自增的计数器。
最后
如果你觉得 Ratatui Kit 有趣或者对你有帮助,欢迎访问我的 Github 仓库 Ratatui Kit 点个 Star 支持一下!你的点赞和关注是我持续更新和优化项目的最大动力。
此外,官方文档 Ratatui Kit 文档 也有更多详细教程和示例,欢迎查阅、交流和反馈。
如果你有任何建议、想法或者遇到问题,也欢迎在仓库 issue 区留言,一起让 Rust 终端 UI 生态更好玩、更强大!