0057-Tui-进度条示例

环境

• Time 2022-08-11
• Rust 1.62.0
• Tui 0.18.0

前言

说明

参考：https://github.com/fdehau/tui-rs/blob/master/examples/gauge.rs

目标

使用 tui-rs 显示进度条。

render_gauge1

fn render_gauge1<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let gauge = widgets::Gauge::default()
        .block(Block::default().title("进度条1").borders(Borders::ALL))
        .gauge_style(Style::default().fg(Color::Yellow))
        .percent(app.progress1);
    frame.render_widget(gauge, area);
}

render_gauge2

fn render_gauge2<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let gauge = widgets::Gauge::default()
        .block(Block::default().title("进度条2").borders(Borders::ALL))
        .gauge_style(Style::default().fg(Color::Magenta).bg(Color::Green))
        .percent(app.progress2)
        .label(format!("{}/100", app.progress2));
    frame.render_widget(gauge, area);
}

render_gauge3

fn render_gauge3<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let label = text::Span::styled(
        format!("{:.2}%", app.progress3 * 100.0),
        Style::default()
            .fg(Color::Red)
            .add_modifier(Modifier::ITALIC | Modifier::BOLD),
    );
    let gauge = widgets::Gauge::default()
        .block(Block::default().title("进度条3").borders(Borders::ALL))
        .gauge_style(Style::default().fg(Color::Yellow))
        .ratio(app.progress3)
        .label(label)
        .use_unicode(true);
    frame.render_widget(gauge, area);
}

render_gauge4

fn render_gauge4<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let gauge = widgets::Gauge::default()
        .block(Block::default().title("进度条4"))
        .gauge_style(
            Style::default()
                .fg(Color::Cyan)
                .add_modifier(Modifier::ITALIC),
        )
        .percent(app.progress4)
        .label(format!("{}/100", app.progress2));
    frame.render_widget(gauge, area);
}

ui

fn ui<B: Backend>(frame: &mut Frame<B>, app: &App) {
    let chunks = layout::Layout::default()
        .direction(layout::Direction::Vertical)
        .margin(2)
        .constraints([
            layout::Constraint::Percentage(25),
            layout::Constraint::Percentage(25),
            layout::Constraint::Percentage(25),
            layout::Constraint::Percentage(25),
        ])
        .split(frame.size());

    render_gauge1(frame, chunks[0], app);
    render_gauge2(frame, chunks[1], app);
    render_gauge3(frame, chunks[2], app);
    render_gauge4(frame, chunks[3], app);
}

效果展示

总结

使用 tui-rs 渲染进度条。

附录

源码

use anyhow::{Context, Result};
use crossterm::{event, terminal, ExecutableCommand};
use style::{Color, Modifier, Style};
use tui::backend::{Backend, CrosstermBackend};
use tui::{layout, style, text, widgets, Frame, Terminal};
use widgets::{Block, Borders};

pub fn main() -> Result<()> {
    terminal::enable_raw_mode()?;
    let mut backend = CrosstermBackend::new(std::io::stdout());
    backend
        .execute(terminal::EnterAlternateScreen)?
        .execute(terminal::Clear(terminal::ClearType::All))?
        .hide_cursor()?;
    let mut terminal = tui::Terminal::new(backend)?;
    run(&mut terminal)?;
    terminal::disable_raw_mode()?;
    terminal
        .backend_mut()
        .execute(terminal::Clear(terminal::ClearType::All))?
        .execute(terminal::LeaveAlternateScreen)?
        .show_cursor()
        .context("重置控制台失败")
}

fn run<B: Backend>(terminal: &mut Terminal<B>) -> Result<()> {
    let timeout = std::time::Duration::from_millis(500);
    let mut app = App::new();
    loop {
        terminal.draw(|frame| ui(frame, &app))?;

        if event::poll(timeout)? {
            if let event::Event::Key(key) = event::read()? {
                use event::KeyCode::{Char, Esc};
                match key.code {
                    Char('q') | Char('Q') | Esc => return Ok(()),
                    _ => {}
                }
            }
        }
        app.on_tick();
    }
}
struct App {
    progress1: u16,
    progress2: u16,
    progress3: f64,
    progress4: u16,
}

impl App {
    fn new() -> App {
        App {
            progress1: 0,
            progress2: 0,
            progress3: 0.45,
            progress4: 0,
        }
    }

    fn on_tick(&mut self) {
        self.progress1 += 1;
        if self.progress1 > 100 {
            self.progress1 = 0;
        }
        self.progress2 += 2;
        if self.progress2 > 100 {
            self.progress2 = 0;
        }
        self.progress3 += 0.001;
        if self.progress3 > 1.0 {
            self.progress3 = 0.0;
        }
        self.progress4 += 1;
        if self.progress4 > 100 {
            self.progress4 = 0;
        }
    }
}

fn ui<B: Backend>(frame: &mut Frame<B>, app: &App) {
    let chunks = layout::Layout::default()
        .direction(layout::Direction::Vertical)
        .margin(2)
        .constraints([
            layout::Constraint::Percentage(25),
            layout::Constraint::Percentage(25),
            layout::Constraint::Percentage(25),
            layout::Constraint::Percentage(25),
        ])
        .split(frame.size());

    render_gauge1(frame, chunks[0], app);
    render_gauge2(frame, chunks[1], app);
    render_gauge3(frame, chunks[2], app);
    render_gauge4(frame, chunks[3], app);
}

fn render_gauge1<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let gauge = widgets::Gauge::default()
        .block(Block::default().title("进度条1").borders(Borders::ALL))
        .gauge_style(Style::default().fg(Color::Yellow))
        .percent(app.progress1);
    frame.render_widget(gauge, area);
}

fn render_gauge2<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let gauge = widgets::Gauge::default()
        .block(Block::default().title("进度条2").borders(Borders::ALL))
        .gauge_style(Style::default().fg(Color::Magenta).bg(Color::Green))
        .percent(app.progress2)
        .label(format!("{}/100", app.progress2));
    frame.render_widget(gauge, area);
}

fn render_gauge3<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let label = text::Span::styled(
        format!("{:.2}%", app.progress3 * 100.0),
        Style::default()
            .fg(Color::Red)
            .add_modifier(Modifier::ITALIC | Modifier::BOLD),
    );
    let gauge = widgets::Gauge::default()
        .block(Block::default().title("进度条3").borders(Borders::ALL))
        .gauge_style(Style::default().fg(Color::Yellow))
        .ratio(app.progress3)
        .label(label)
        .use_unicode(true);
    frame.render_widget(gauge, area);
}

fn render_gauge4<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let gauge = widgets::Gauge::default()
        .block(Block::default().title("进度条4"))
        .gauge_style(
            Style::default()
                .fg(Color::Cyan)
                .add_modifier(Modifier::ITALIC),
        )
        .percent(app.progress4)
        .label(format!("{}/100", app.progress2));
    frame.render_widget(gauge, area);
}