0059-Tui-弹出框示例

环境

• Time 2022-08-15
• Rust 1.63.0
• Tui 0.18.0

前言

说明

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

目标

使用 tui-rs 显示弹出框。

定义数据

struct App {
    show_popup: bool,
}

impl App {
    fn new() -> App {
        App { show_popup: false }
    }
}

文字说明栏

    let chunks = layout::Layout::default()
        .constraints([
            layout::Constraint::Percentage(10),
            layout::Constraint::Percentage(90),
        ])
        .split(frame.size());

    let text = if app.show_popup {
        "按 p 关闭弹出框"
    } else {
        "按 p 打开弹出框"
    };
    let paragraph = widgets::Paragraph::new(text::Span::styled(
        text,
        Style::default().add_modifier(Modifier::SLOW_BLINK),
    ))
    .alignment(Alignment::Center)
    .wrap(widgets::Wrap { trim: true });
    frame.render_widget(paragraph, chunks[0]);

底部区域

    let block = Block::default()
        .title("内容显示区")
        .borders(Borders::ALL)
        .style(Style::default().bg(Color::Blue));
    frame.render_widget(block, chunks[1]);

    if app.show_popup {
        let block = Block::default().title("弹出框").borders(Borders::ALL);
        let area = centered_rect(60, 20, frame.size());
        frame.render_widget(widgets::Clear, area);
        frame.render_widget(block, area);
    }

居中弹出框

fn centered_rect(x: u16, y: u16, area: Rect) -> Rect {
    let popup_layout = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Percentage((100 - y) / 2),
            Constraint::Percentage(y),
            Constraint::Percentage((100 - y) / 2),
        ])
        .split(area);

    Layout::default()
        .direction(Direction::Horizontal)
        .constraints([
            Constraint::Percentage((100 - x) / 2),
            Constraint::Percentage(x),
            Constraint::Percentage((100 - x) / 2),
        ])
        .split(popup_layout[1])[1]
}

效果展示

总结

使用 tui-rs 渲染弹出框。

附录

源码

use anyhow::{Context, Result};
use crossterm::{event, terminal, ExecutableCommand};
use layout::{Alignment, Constraint, Direction, Layout, Rect};
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(()),
                    Char('p') | Char('P') => app.show_popup = !app.show_popup,
                    _ => {}
                }
            }
        }
    }
}

struct App {
    show_popup: bool,
}

impl App {
    fn new() -> App {
        App { show_popup: false }
    }
}

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

    let text = if app.show_popup {
        "按 p 关闭弹出框"
    } else {
        "按 p 打开弹出框"
    };
    let paragraph = widgets::Paragraph::new(text::Span::styled(
        text,
        Style::default().add_modifier(Modifier::SLOW_BLINK),
    ))
    .alignment(Alignment::Center)
    .wrap(widgets::Wrap { trim: true });
    frame.render_widget(paragraph, chunks[0]);

    let block = Block::default()
        .title("内容显示区")
        .borders(Borders::ALL)
        .style(Style::default().bg(Color::Blue));
    frame.render_widget(block, chunks[1]);

    if app.show_popup {
        let block = Block::default().title("弹出框").borders(Borders::ALL);
        let area = centered_rect(60, 20, frame.size());
        frame.render_widget(widgets::Clear, area);
        frame.render_widget(block, area);
    }
}

fn centered_rect(x: u16, y: u16, area: Rect) -> Rect {
    let popup_layout = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Percentage((100 - y) / 2),
            Constraint::Percentage(y),
            Constraint::Percentage((100 - y) / 2),
        ])
        .split(area);

    Layout::default()
        .direction(Direction::Horizontal)
        .constraints([
            Constraint::Percentage((100 - x) / 2),
            Constraint::Percentage(x),
            Constraint::Percentage((100 - x) / 2),
        ])
        .split(popup_layout[1])[1]
}