环境
- 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);
}