0063-Tui-页签示例

环境

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

前言

说明

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

目标

使用 tui-rs 显示页签。

定义应用

struct App<'a> {
    pub titles: Vec<&'a str>,
    pub index: usize,
}

impl<'a> App<'a> {
    fn new() -> App<'a> {
        App {
            titles: vec!["唐", "宋", "元", "明"],
            index: 0,
        }
    }

    pub fn next(&mut self) {
        self.index = (self.index + 1) % self.titles.len();
    }

    pub fn previous(&mut self) {
        if self.index > 0 {
            self.index -= 1;
        } else {
            self.index = self.titles.len() - 1;
        }
    }
}

ui

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

    let block = Block::default().style(Style::default().bg(Color::White).fg(Color::Black));
    frame.render_widget(block, size);
    let titles = app
        .titles
        .iter()
        .map(|&title| {
            text::Spans::from(vec![text::Span::styled(
                title,
                Style::default().fg(Color::Yellow),
            )])
        })
        .collect();
    let tabs = Tabs::new(titles)
        .block(Block::default().borders(Borders::ALL).title("页签"))
        .select(app.index)
        .style(Style::default().fg(Color::Cyan))
        .highlight_style(
            Style::default()
                .add_modifier(Modifier::BOLD)
                .bg(Color::Black),
        );
    frame.render_widget(tabs, chunks[0]);
    let inner = match app.index {
        0 => Block::default().title("唐诗").borders(Borders::ALL),
        1 => Block::default().title("宋词").borders(Borders::ALL),
        2 => Block::default().title("元曲").borders(Borders::ALL),
        3 => Block::default().title("明小说").borders(Borders::ALL),
        _ => unreachable!(),
    };
    frame.render_widget(inner, chunks[1]);
}

效果展示

总结

使用 tui-rs 渲染页签。

附录

源码

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

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, &mut app))?;

        if event::poll(timeout)? {
            if let event::Event::Key(key) = event::read()? {
                use event::KeyCode::{self, Char, Esc};
                match key.code {
                    Char('q') | Char('Q') | Esc => return Ok(()),
                    KeyCode::Right => app.next(),
                    KeyCode::Left => app.previous(),
                    _ => {}
                }
            }
        }
    }
}

struct App<'a> {
    pub titles: Vec<&'a str>,
    pub index: usize,
}

impl<'a> App<'a> {
    fn new() -> App<'a> {
        App {
            titles: vec!["唐", "宋", "元", "明"],
            index: 0,
        }
    }

    pub fn next(&mut self) {
        self.index = (self.index + 1) % self.titles.len();
    }

    pub fn previous(&mut self) {
        if self.index > 0 {
            self.index -= 1;
        } else {
            self.index = self.titles.len() - 1;
        }
    }
}

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

    let block = Block::default().style(Style::default().bg(Color::White).fg(Color::Black));
    frame.render_widget(block, size);
    let titles = app
        .titles
        .iter()
        .map(|&title| {
            text::Spans::from(vec![text::Span::styled(
                title,
                Style::default().fg(Color::Yellow),
            )])
        })
        .collect();
    let tabs = Tabs::new(titles)
        .block(Block::default().borders(Borders::ALL).title("页签"))
        .select(app.index)
        .style(Style::default().fg(Color::Cyan))
        .highlight_style(
            Style::default()
                .add_modifier(Modifier::BOLD)
                .bg(Color::Black),
        );
    frame.render_widget(tabs, chunks[0]);
    let inner = match app.index {
        0 => Block::default().title("唐诗").borders(Borders::ALL),
        1 => Block::default().title("宋词").borders(Borders::ALL),
        2 => Block::default().title("元曲").borders(Borders::ALL),
        3 => Block::default().title("明小说").borders(Borders::ALL),
        _ => unreachable!(),
    };
    frame.render_widget(inner, chunks[1]);
}