Rust 终端 UI 开发新玩法：用 Ratatui Kit 轻松打造高颜值 CLI

什么是 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 生态更好玩、更强大！