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