使用 Ratatui + ChatGPT 生成终端用户界面

使用 Ratatui + ChatGPT 生成终端用户界面

💡 原文英文,约1800词,阅读约需7分钟。
📝

内容提要

文章介绍 Rust 终端 UI 库 ratatui 发布 v0.22.0。作者演示先用 ASCIIFlow 绘制界面草图,再让 ChatGPT 生成 tui-rs 代码,经修改得到可用布局。新版亮点包括:prelude 模块简化导入、新增可定制滚动条组件、Block 支持多标题、柱状图支持分组、样式简写与 const 样式、更多颜色名解析,并集成 cargo-husky、bacon 等开发工具。

🔎

延伸解读

用 ASCII 草图驱动代码生成

作者先用 ASCIIFlow 画出终端界面布局,再把这段纯文本草图交给 ChatGPT,让它生成 tui-rs 代码。这样做的好处是绕开 ChatGPT 暂不支持图像输入的限制,同时把“想象控件位置”变成可视化的文本草图。不过生成结果并不直接可用,需要手动修正布局方向、标题位置等错误,说明这种方法更适合作为快速起步的草稿,而非一步到位的方案。

ChatGPT 对 ratatui 的认知滞后

文中提到,ChatGPT 当时还不了解 ratatui,提示词里只能使用其前身 tui-rs,而且模型会建议使用较旧的 tui-rs 0.16.0 版本。这意味着直接让模型生成 ratatui 代码可能得到过时或错误的 API 调用。读者若尝试类似流程,应明确告知模型目标库和版本,并对生成代码中的导入、类型和 API 做核对,不能直接照搬。

v0.22.0 降低样板代码成本

新版通过 prelude 模块减少大量导入,样式简写让链式调用更紧凑,const 样式允许在编译期构造样式,Block 支持多标题、柱状图支持分组、新增可定制滚动条,这些都直接回应了作者提到的重复代码问题。对已有项目而言,这些改动能减少样板代码并提升可读性,但升级时仍需留意 API 变化,尤其是标题和样式相关写法。

颜色解析更宽容,但命名有坑

新版颜色解析支持连字符、下划线、空格和驼峰等多种写法,也支持 bright/light 前缀以及 gray/grey 两种拼写。不过文章特别指出,gray 有时被叫作 white 的情况并不支持,因为 white 被用于亮白色。读者在解析颜色字符串时,应优先使用文档中明确支持的写法,避免依赖口语化别名导致解析失败。

❓

Q&A

如何用 ChatGPT 辅助生成 ratatui 终端界面代码?

先用 ASCIIFlow 绘制界面草图并导出为文本,再将 ASCII 设计作为提示词输入 ChatGPT,让其生成 tui-rs 代码,最后手动修改得到可用的 ratatui 布局。

ratatui v0.22.0 新增了哪些主要功能?

新增 prelude 模块简化导入、可定制滚动条组件、Block 支持多标题、柱状图支持分组、样式简写与 const 样式、更多颜色名解析,并集成 cargo-husky、bacon 等开发工具。

ratatui 的 Scrollbar 组件怎么用?

Scrollbar 可与任意 Rect 配合使用,通过 ScrollbarState 作为状态化组件渲染,并可自定义方向、样式和符号,例如设置垂直右侧、开始和结束符号。

ratatui 的 Block 如何添加多个标题?

Block 支持通过 Title 组件添加多个标题,每个标题可设置对齐方式和位置(顶部或底部),相同位置或对齐的标题之间用空格分隔渲染。

ratatui 支持哪些颜色名称格式?

支持连字符颜色名如 light-red,支持 ANSI 颜色表中的所有颜色,支持 bright 和 light 前缀,支持 -、_ 和空格作为分隔符,以及 gray 和 grey 两种拼写。

ratatui 的样式简写和 const 样式是什么?

样式简写允许对 str、Span 和 Paragraph 使用链式方法如 .red().on_blue().bold() 快速设置样式;const 样式允许在常量上下文中构造 Style,例如使用 Style::with 和 Modifier 组合。

🏷️

标签

➡️

继续阅读