0052-Tui-设置方块样式

环境

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

前言

说明

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

目标

使用 tui-rs 对方块设置各种不同的样式。

设置背景色

let block = widgets::Block::default()
    .title("设置背景色")
    .style(style::Style::default().bg(style::Color::Green));
frame.render_widget(block, chunks[0]);

带样式的标题

let title = text::Span::styled(
    "带样式的标题",
    style::Style::default()
        .fg(style::Color::White)
        .bg(style::Color::Red)
        .add_modifier(style::Modifier::BOLD),
);
let block = widgets::Block::default()
    .title(title)
    .title_alignment(layout::Alignment::Right);

带左右边框的方块

let block = widgets::Block::default()
    .title("带左右边框的方块")
    .borders(widgets::Borders::LEFT | widgets::Borders::RIGHT);

带双边框的方块

let block = widgets::Block::default()
    .title("带双边框的方块")
    .border_style(style::Style::default().fg(style::Color::Cyan))
    .borders(widgets::Borders::ALL)
    .border_type(widgets::BorderType::Double);

效果展示

总结

使用 tui-rs 来设置方块的不同格式，可以对标题、背景、边框自定义。

附录

源码

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

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<()> {
    loop {
        terminal.draw(ui)?;

        if let event::Event::Key(key) = event::read()? {
            use event::KeyCode::{Char, Esc};
            match key.code {
                Char('q') | Char('Q') | Esc => return Ok(()),
                _ => {}
            }
        }
    }
}

const CONSTRAINTS: [layout::Constraint; 2] = [
    layout::Constraint::Percentage(50),
    layout::Constraint::Percentage(50),
];

fn ui<B: Backend>(frame: &mut Frame<B>) {
    render_main_block(frame);
    let chunks = layout::Layout::default()
        .direction(layout::Direction::Vertical)
        .margin(1)
        .constraints(CONSTRAINTS)
        .split(frame.size());

    render_top(frame, chunks[0]);
    render_bottom(frame, chunks[1]);
}

fn render_main_block<B: Backend>(frame: &mut Frame<B>) {
    let block = widgets::Block::default()
        .title("圆角主方块")
        .title_alignment(layout::Alignment::Center)
        .borders(widgets::Borders::ALL)
        .border_type(widgets::BorderType::Rounded);
    frame.render_widget(block, frame.size());
}

fn render_top<B: Backend>(frame: &mut Frame<B>, area: layout::Rect) {
    let chunks = layout::Layout::default()
        .direction(layout::Direction::Horizontal)
        .constraints(CONSTRAINTS)
        .split(area);

    let block = widgets::Block::default()
        .title("设置背景色")
        .style(style::Style::default().bg(style::Color::Green));
    frame.render_widget(block, chunks[0]);

    let title = text::Span::styled(
        "带样式的标题",
        style::Style::default()
            .fg(style::Color::White)
            .bg(style::Color::Red)
            .add_modifier(style::Modifier::BOLD),
    );
    let block = widgets::Block::default()
        .title(title)
        .title_alignment(layout::Alignment::Right);
    frame.render_widget(block, chunks[1]);
}

fn render_bottom<B: Backend>(frame: &mut Frame<B>, area: layout::Rect) {
    let chunks = layout::Layout::default()
        .direction(layout::Direction::Horizontal)
        .constraints(CONSTRAINTS)
        .split(area);

    let block = widgets::Block::default()
        .title("带有左右边框的方块")
        .borders(widgets::Borders::LEFT | widgets::Borders::RIGHT);
    frame.render_widget(block, chunks[0]);

    let block = widgets::Block::default()
        .title("带有双边框的方块")
        .border_style(style::Style::default().fg(style::Color::Cyan))
        .borders(widgets::Borders::ALL)
        .border_type(widgets::BorderType::Double);
    frame.render_widget(block, chunks[1]);
}