高手过招不用鼠标，一款超好用的跨平台命令行界面库

而最趁手的莫过于自己亲手打造的!本期 《讲解开源项目》 就介绍一个让你快速拥有完美命令行界面的跨平台库—— tui.rs。

创新互联公司-成都网站建设公司，专注做网站、成都网站建设、网站营销推广，申请域名，雅安服务器托管，网站运营有关企业网站制作方案、改版、费用等问题，请联系创新互联公司。

项目地址：https://github.com/fdehau/tui-rs

官方文档：https://docs.rs/tui/latest/tui/index.html

你一定有过这样的纠结：我的程序需要一个界面，但使用诸如 Qt 等框架又比较繁琐。现在 tui.rs 来了，它是 Rust 下的命令行 UI 库，不仅上手方便内置多种组件，而且效果炫酷支持跨平台使用。

轻松实现一份代码可以无缝运行在 Linux/Windows/Mac 之上!

接下来你不仅可以快速上手 tui.rs，还会收获多款基于它构建的神兵利器!

一、安装

tui.rs 采用 Rust 语言编写，和所有其他 Rust 依赖的安装方法一样，直接在 cargo.toml 中添加依赖即可：

[dependencies]
tui = "0.17"
crossterm = "0.22"

如果需要官方示例，则直接 clone 官方仓库：

$ git clone http://github.com/fdehau/tui-rs.git
$ cd tui-rs
$ cargo run --example demo

二、快速入门

2.1 一览芳容

我们主要使用 tui.rs 提供的以下模块进行 UI 编写(所有 UI 元素都实现了 Widget 或 StatefuWidget Trait)：

• bakend 用于生成管理命令行的后端
• layout 用于管理 UI 组件的布局
• style 用于为 UI 添加样式
• symbols 描述绘制散点图时所用点的样式
• text 用于描述带样式的文本
• widgets 包含预定义的 UI 组件

如下代码就可以实现一个很简单的 tui 界面：

use crossterm::{
    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
    execute,
    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
};
use std::{io, time::Duration};
use tui::{
    backend::{Backend, CrosstermBackend},
    layout::{Alignment, Constraint, Direction, Layout},
    style::{Color, Modifier, Style},
    text::{Span, Spans, Text},
    widgets::{Block, Borders, Paragraph, Widget},
    Frame, Terminal,
};

struct App {
    url: String, // 存放一些数据或者 UI 状态
}
fn main() -> Result<(), io::Error> {
    // 初始化终端
    enable_raw_mode()?;
    let mut stdout = io::stdout();
    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
    let backend = CrosstermBackend::new(stdout);
    let mut terminal = Terminal::new(backend)?;
    let mut app = App {
        url: String::from(r"https://hellogithub.com/"),
    };
    // 渲染界面
    run_app(&mut terminal, app)?;
    // 恢复终端
    disable_raw_mode()?;
    execute!(
        terminal.backend_mut(),
        LeaveAlternateScreen,
        DisableMouseCapture
    )?;
    terminal.show_cursor()?;

    Ok(())
}

fn run_app(terminal: &mut Terminal, mut app: App) -> io::Result<()> {
    loop {
        terminal.draw(|f| ui(f, &mut app))?;
        // 处理按键事件
        if crossterm::event::poll(Duration::from_secs(1))? {
            if let Event::Key(key) = event::read()? {
                match key.code {
                    KeyCode::Char(ch) => {
                        if 'q' == ch {
                            break;
                        }
                    }
                    _ => {}
                }
            }
        }
        // 处理其他逻辑
    }
    Ok(())
}
fn ui(f: &mut Frame, app: &mut App) {
    //
    let chunks = Layout::default() // 首先获取默认构造
        .constraints([Constraint::Length(3), Constraint::Min(3)].as_ref()) // 按照 3 行 和 最小 3 行的规则分割区域
        .direction(Direction::Vertical) // 垂直分割
        .split(f.size()); // 分割整块 Terminal 区域
    let paragraph = Paragraph::new(Span::styled(
        app.url.as_str(),
        Style::default().add_modifier(Modifier::BOLD),
    ))
    .block(Block::default().borders(Borders::ALL).title("HelloGitHub"))
    .alignment(tui::layout::Alignment::Left);
    f.render_widget(paragraph, chunks[0]);

    let paragraph = Paragraph::new("分享 GitHub 上有趣、入门级的开源项目")
        .style(Style::default().bg(Color::White).fg(Color::Black))
        .block(Block::default().borders(Borders::ALL).title("宗旨"))
        .alignment(Alignment::Center);
    f.render_widget(paragraph, chunks[1]);
}

这些代码可能看起来不少，但大部分都是固定的模板，不需要我们每次的重新构思。下面，就让我们来详细了解其中的细节。

2.2 创作模板

官方通过 example 给出了使用 tui.rs 进行设计的模板，我希望各位读者在使用时也能遵守这套模板以保证程序的可读性。

一个使用 tui.rs 程序的一生大概是这样的：

其模块可以大致分为：

• app.rs 实现 App 结构体，用于处理 UI 逻辑，保存 UI 状态
• ui.rs 实现 UI 渲染功能

fn main() -> Result<(), io::Error> {
    // 配置 Terminal
    enable_raw_mode()?; // 启动命令行的 raw 模式
    let mut stdout = io::stdout();
    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?; // 在一个新的界面上运行 UI，保存原终端内容，并开启鼠标捕获
    let backend = CrosstermBackend::new(stdout);
    let mut terminal = Terminal::new(backend)?;
    // 初始化 app 资源
    let mut app = App {
        url: String::from(r"https://hellogithub.com/"),
    };
  // 程序主要逻辑循环 …… //
    run_app(&mut terminal, app)?;
    // 恢复 Terminal
    disable_raw_mode()?; // 禁用 raw 模式
    execute!(
        terminal.backend_mut(),
        LeaveAlternateScreen, // 恢复到原来的命令行窗口
        DisableMouseCapture  // 禁用鼠标捕获
    )?;
    terminal.show_cursor()?; // 显示光标

    Ok(())
}

fn run_app(terminal: &mut Terminal, mut app: App) -> io::Result<()> {
    loop {
        // 渲染 UI
        terminal.draw(|f| ui(f, &mut app))?;
        // 处理按键事件
        if crossterm::event::poll(Duration::from_secs(1))? { // poll 方法非阻塞轮询
            if let Event::Key(key) = event::read()? { // 直接 read 如果没有事件到来则会阻塞等待
                match key.code { // 判断用户按键
                    KeyCode::Char(ch) => {
                        if 'q' == ch {
                            break;
                        }
                    }
                    _ => {}
                }
            }
        }
        // 处理其他逻辑
    }
    Ok(())
}

fn ui(f: &mut Frame, app: &mut App) {
    // 获取分割后的窗口
    let chunks = Layout::default() // 首先获取默认构造
        .constraints([Constraint::Length(3), Constraint::Min(3)].as_ref()) // 按照 3 行 和 最小 3 行的规则分割区域
        .direction(Direction::Vertical) // 垂直方向分割
        .split(f.size()); // 分割整块 Terminal 区域
    let paragraph = Paragraph::new(Span::styled(
        app.url.as_str(),
        Style::default().add_modifier(Modifier::BOLD),
    ))
    .block(Block::default().borders(Borders::ALL).title("HelloGitHub"))
    .alignment(tui::layout::Alignment::Left);
    f.render_widget(paragraph, chunks[0]);

    let paragraph = Paragraph::new("分享 GitHub 上有趣、入门级的开源项目")
        .style(Style::default().bg(Color::White).fg(Color::Black))
        .block(Block::default().borders(Borders::ALL).title("宗旨"))
        .alignment(Alignment::Center);
    f.render_widget(paragraph, chunks[1]);
}