0050-Tui-控制台方块布局

环境

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

前言

说明

参考：https://docs.rs/tui/latest/tui/index.html

目标

使用 tui-rs 来控制终端界面的布局。

Cargo.toml

[package]
edition = "2021"
name = "game"
version = "0.1.0"

[dependencies]
anyhow = "*"
crossterm = "*"
tui = "*"

分离终端初始化

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)?;

    terminal.draw(ui)?;

    std::thread::sleep(std::time::Duration::from_secs(4));

    terminal::disable_raw_mode()?;
    terminal
        .backend_mut()
        .execute(terminal::Clear(terminal::ClearType::All))?
        .execute(terminal::LeaveAlternateScreen)?
        .show_cursor()
        .context("重置控制台失败")
}

切分为三块

let constraints = [
    layout::Constraint::Percentage(10),
    layout::Constraint::Percentage(80),
    layout::Constraint::Percentage(10),
];
let chunks = layout::Layout::default()
    .direction(layout::Direction::Vertical)
    .margin(1)
    .constraints(constraints)
    .split(frame.size());

渲染第一块

let block = widgets::Block::default()
    .title("第一个方块")
    .borders(widgets::Borders::ALL);
frame.render_widget(block, chunks[0]);

渲染第二块

let block = widgets::Block::default()
    .title("第二个方块")
    .borders(widgets::Borders::ALL);
frame.render_widget(block, chunks[1]);

总结

使用 tui-rs 创建了一个终端程序，使用竖直方向上的三块布局。

附录

源码

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

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)?;

    terminal.draw(ui)?;

    std::thread::sleep(std::time::Duration::from_secs(4));

    terminal::disable_raw_mode()?;
    terminal
        .backend_mut()
        .execute(terminal::Clear(terminal::ClearType::All))?
        .execute(terminal::LeaveAlternateScreen)?
        .show_cursor()
        .context("重置控制台失败")
}

fn ui<B: Backend>(frame: &mut Frame<B>) {
    let constraints = [
        layout::Constraint::Percentage(10),
        layout::Constraint::Percentage(80),
        layout::Constraint::Percentage(10),
    ];
    let chunks = layout::Layout::default()
        .direction(layout::Direction::Vertical)
        .margin(1)
        .constraints(constraints)
        .split(frame.size());
    let block = widgets::Block::default()
        .title("第一个方块")
        .borders(widgets::Borders::ALL);
    frame.render_widget(block, chunks[0]);
    let block = widgets::Block::default()
        .title("第二个方块")
        .borders(widgets::Borders::ALL);
    frame.render_widget(block, chunks[1]);
}