0060-Tui-列表示例

环境

Time 2022-08-15
Rust 1.63.0
Tui 0.18.0

前言

说明

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

目标

使用 tui-rs 显示列表。

定义数据

struct App<'a> {
    菜单: StatefulList<(&'a str, usize)>,
    诗句: Vec<(&'a str, &'a str)>,
}

impl<'a> App<'a> {
    fn new() -> App<'a> {
        App {
            菜单: StatefulList::with_items(vec![
                ("文件", 1),
                ("编辑", 2),
                ("视图", 1),
                ("帮助", 3),
            ]),
            诗句: vec![
                ("浔阳江头夜送客，枫叶荻花秋瑟瑟。", "INFO"),
                ("主人下马客在船，举酒欲饮无管弦。", "INFO"),
                ("醉不成欢惨将别，别时茫茫江浸月。", "CRITICAL"),
                ("忽闻水上琵琶声，主人忘归客不发。", "ERROR"),
                ("寻声暗问弹者谁？琵琶声停欲语迟。", "INFO"),
                ("移船相近邀相见，添酒回灯重开宴。", "INFO"),
                ("千呼万唤始出来，犹抱琵琶半遮面。", "WARNING"),
                ("转轴拨弦三两声，未成曲调先有情。", "INFO"),
                ("弦弦掩抑声声思，似诉平生不得志。", "INFO"),
                ("低眉信手续续弹，说尽心中无限事。", "INFO"),
                ("轻拢慢捻抹复挑，初为霓裳后六幺。", "CRITICAL"),
                ("大弦嘈嘈如急雨，小弦切切如私语。", "INFO"),
                ("嘈嘈切切错杂弹，大珠小珠落玉盘。", "INFO"),
                ("间关莺语花底滑，幽咽泉流冰下难。", "INFO"),
                ("冰泉冷涩弦凝绝，凝绝不通声暂歇。", "INFO"),
                ("别有幽愁暗恨生，此时无声胜有声。", "INFO"),
                ("银瓶乍破水浆迸，铁骑突出刀枪鸣。", "ERROR"),
                ("曲终收拨当心画，四弦一声如裂帛。", "ERROR"),
                ("东船西舫悄无言，唯见江心秋月白。", "INFO"),
                ("沉吟放拨插弦中，整顿衣裳起敛容。", "INFO"),
                ("自言本是京城女，家在虾蟆陵下住。", "WARNING"),
                ("十三学得琵琶成，名属教坊第一部。", "INFO"),
                ("曲罢曾教善才服，妆成每被秋娘妒。", "INFO"),
                ("五陵年少争缠头，一曲红绡不知数。", "WARNING"),
                ("钿头银篦击节碎，血色罗裙翻酒污。", "INFO"),
                ("今年欢笑复明年，秋月春风等闲度。", "INFO"),
            ],
        }
    }

    fn on_tick(&mut self) {
        let event = self.诗句.remove(0);
        self.诗句.push(event);
    }
}

有状态数据

struct StatefulList<T> {
    state: ListState,
    items: Vec<T>,
}

impl<T> StatefulList<T> {
    fn with_items(items: Vec<T>) -> StatefulList<T> {
        StatefulList {
            state: ListState::default(),
            items,
        }
    }

    fn next(&mut self) {
        let i = match self.state.selected() {
            Some(i) => {
                if i >= self.items.len() - 1 {
                    0
                } else {
                    i + 1
                }
            }
            None => 0,
        };
        self.state.select(Some(i));
    }

    fn previous(&mut self) {
        let i = match self.state.selected() {
            Some(i) => {
                if i == 0 {
                    self.items.len() - 1
                } else {
                    i - 1
                }
            }
            None => 0,
        };
        self.state.select(Some(i));
    }

    fn unselect(&mut self) {
        self.state.select(None);
    }
}

分区

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

    render_left(frame, chunks[0], app);
    render_right(frame, chunks[1], app);
}

render_left

fn render_left<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &mut App) {
    let items: Vec<ListItem> = app
        .菜单
        .items
        .iter()
        .map(|i| {
            let mut lines = vec![text::Spans::from(i.0)];
            for index in 0..i.1 {
                lines.push(text::Spans::from(text::Span::styled(
                    format!("对于 {} 的说明信息{}", i.0, index),
                    Style::default().add_modifier(Modifier::ITALIC),
                )));
            }
            ListItem::new(lines).style(Style::default().fg(Color::Black).bg(Color::White))
        })
        .collect();

    let items = List::new(items)
        .block(Block::default().borders(Borders::ALL).title("菜单"))
        .highlight_style(
            Style::default()
                .bg(Color::LightGreen)
                .add_modifier(Modifier::BOLD),
        )
        .highlight_symbol(">> ");

    frame.render_stateful_widget(items, area, &mut app.菜单.state);
}

render_right

fn render_right<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let events: Vec<ListItem> = app
        .诗句
        .iter()
        .rev()
        .map(|&(event, level)| new_list_item(event, level, area.width))
        .collect();
    let events_list = List::new(events)
        .block(Block::default().borders(Borders::ALL).title("琵琶行"))
        .start_corner(layout::Corner::BottomLeft);
    frame.render_widget(events_list, area);
}

fn new_list_item<'a>(event: &'a str, level: &'a str, width: u16) -> ListItem<'a> {
    let style = match level {
        "CRITICAL" => Style::default().fg(Color::Red),
        "ERROR" => Style::default().fg(Color::Magenta),
        "WARNING" => Style::default().fg(Color::Yellow),
        "INFO" => Style::default().fg(Color::Blue),
        _ => Style::default(),
    };
    let header = text::Spans::from(vec![
        text::Span::styled(format!("{:<9}", level), style),
        text::Span::raw(" "),
        text::Span::styled(
            "2020-01-01 10:00:00",
            Style::default().add_modifier(Modifier::ITALIC),
        ),
    ]);
    let log = text::Spans::from(vec![text::Span::raw(event)]);

    ListItem::new(vec![
        text::Spans::from("-".repeat(width as usize)),
        header,
        text::Spans::from(""),
        log,
    ])
}

效果展示

总结

使用 tui-rs 渲染列表。

附录

源码

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

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::Left => app.菜单.unselect(),
                    KeyCode::Down => app.菜单.next(),
                    KeyCode::Up => app.菜单.previous(),
                    _ => {}
                }
            }
        }
        app.on_tick();
    }
}

struct StatefulList<T> {
    state: ListState,
    items: Vec<T>,
}

impl<T> StatefulList<T> {
    fn with_items(items: Vec<T>) -> StatefulList<T> {
        StatefulList {
            state: ListState::default(),
            items,
        }
    }

    fn next(&mut self) {
        let i = match self.state.selected() {
            Some(i) => {
                if i >= self.items.len() - 1 {
                    0
                } else {
                    i + 1
                }
            }
            None => 0,
        };
        self.state.select(Some(i));
    }

    fn previous(&mut self) {
        let i = match self.state.selected() {
            Some(i) => {
                if i == 0 {
                    self.items.len() - 1
                } else {
                    i - 1
                }
            }
            None => 0,
        };
        self.state.select(Some(i));
    }

    fn unselect(&mut self) {
        self.state.select(None);
    }
}

struct App<'a> {
    菜单: StatefulList<(&'a str, usize)>,
    诗句: Vec<(&'a str, &'a str)>,
}

impl<'a> App<'a> {
    fn new() -> App<'a> {
        App {
            菜单: StatefulList::with_items(vec![
                ("文件", 1),
                ("编辑", 2),
                ("视图", 1),
                ("帮助", 3),
            ]),
            诗句: vec![
                ("浔阳江头夜送客，枫叶荻花秋瑟瑟。", "INFO"),
                ("主人下马客在船，举酒欲饮无管弦。", "INFO"),
                ("醉不成欢惨将别，别时茫茫江浸月。", "CRITICAL"),
                ("忽闻水上琵琶声，主人忘归客不发。", "ERROR"),
                ("寻声暗问弹者谁？琵琶声停欲语迟。", "INFO"),
                ("移船相近邀相见，添酒回灯重开宴。", "INFO"),
                ("千呼万唤始出来，犹抱琵琶半遮面。", "WARNING"),
                ("转轴拨弦三两声，未成曲调先有情。", "INFO"),
                ("弦弦掩抑声声思，似诉平生不得志。", "INFO"),
                ("低眉信手续续弹，说尽心中无限事。", "INFO"),
                ("轻拢慢捻抹复挑，初为霓裳后六幺。", "CRITICAL"),
                ("大弦嘈嘈如急雨，小弦切切如私语。", "INFO"),
                ("嘈嘈切切错杂弹，大珠小珠落玉盘。", "INFO"),
                ("间关莺语花底滑，幽咽泉流冰下难。", "INFO"),
                ("冰泉冷涩弦凝绝，凝绝不通声暂歇。", "INFO"),
                ("别有幽愁暗恨生，此时无声胜有声。", "INFO"),
                ("银瓶乍破水浆迸，铁骑突出刀枪鸣。", "ERROR"),
                ("曲终收拨当心画，四弦一声如裂帛。", "ERROR"),
                ("东船西舫悄无言，唯见江心秋月白。", "INFO"),
                ("沉吟放拨插弦中，整顿衣裳起敛容。", "INFO"),
                ("自言本是京城女，家在虾蟆陵下住。", "WARNING"),
                ("十三学得琵琶成，名属教坊第一部。", "INFO"),
                ("曲罢曾教善才服，妆成每被秋娘妒。", "INFO"),
                ("五陵年少争缠头，一曲红绡不知数。", "WARNING"),
                ("钿头银篦击节碎，血色罗裙翻酒污。", "INFO"),
                ("今年欢笑复明年，秋月春风等闲度。", "INFO"),
            ],
        }
    }

    fn on_tick(&mut self) {
        let event = self.诗句.remove(0);
        self.诗句.push(event);
    }
}
fn ui<B: Backend>(frame: &mut Frame<B>, app: &mut App) {
    let chunks = Layout::default()
        .direction(Direction::Horizontal)
        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
        .split(frame.size());

    render_left(frame, chunks[0], app);
    render_right(frame, chunks[1], app);
}

fn render_left<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &mut App) {
    let items: Vec<ListItem> = app
        .菜单
        .items
        .iter()
        .map(|i| {
            let mut lines = vec![text::Spans::from(i.0)];
            for index in 0..i.1 {
                lines.push(text::Spans::from(text::Span::styled(
                    format!("对于 {} 的说明信息{}", i.0, index),
                    Style::default().add_modifier(Modifier::ITALIC),
                )));
            }
            ListItem::new(lines).style(Style::default().fg(Color::Black).bg(Color::White))
        })
        .collect();

    let items = List::new(items)
        .block(Block::default().borders(Borders::ALL).title("菜单"))
        .highlight_style(
            Style::default()
                .bg(Color::LightGreen)
                .add_modifier(Modifier::BOLD),
        )
        .highlight_symbol(">> ");

    frame.render_stateful_widget(items, area, &mut app.菜单.state);
}

fn render_right<B: Backend>(frame: &mut Frame<B>, area: layout::Rect, app: &App) {
    let events: Vec<ListItem> = app
        .诗句
        .iter()
        .rev()
        .map(|&(event, level)| new_list_item(event, level, area.width))
        .collect();
    let events_list = List::new(events)
        .block(Block::default().borders(Borders::ALL).title("琵琶行"))
        .start_corner(layout::Corner::BottomLeft);
    frame.render_widget(events_list, area);
}

fn new_list_item<'a>(event: &'a str, level: &'a str, width: u16) -> ListItem<'a> {
    let style = match level {
        "CRITICAL" => Style::default().fg(Color::Red),
        "ERROR" => Style::default().fg(Color::Magenta),
        "WARNING" => Style::default().fg(Color::Yellow),
        "INFO" => Style::default().fg(Color::Blue),
        _ => Style::default(),
    };
    let header = text::Spans::from(vec![
        text::Span::styled(format!("{:<9}", level), style),
        text::Span::raw(" "),
        text::Span::styled(
            "2020-01-01 10:00:00",
            Style::default().add_modifier(Modifier::ITALIC),
        ),
    ]);
    let log = text::Spans::from(vec![text::Span::raw(event)]);

    ListItem::new(vec![
        text::Spans::from("-".repeat(width as usize)),
        header,
        text::Spans::from(""),
        log,
    ])
}

posted @ 2022-09-30 20:58 jiangbo4444 阅读(49) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 0064-Tui-图表示例

· 0072-Tui-综合示例（四）

· Rust学习笔记

· tauri中的通信

· RUST入门.md

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

历史上的今天：
2020-09-30 【JavaScript】展开语法
2020-09-30 【JavaScript】剩余参数
2020-09-30 【JavaScript】默认参数
2020-09-30 【JavaScript】import
2020-09-30 【JavaScript】debugger
2020-09-30 【JavaScript】for await...of

公告

昵称： jiangbo4444
园龄： 6年8个月
粉丝： 27
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

波尔

0060-Tui-列表示例

环境

前言

说明

目标

定义数据

有状态数据

分区

render_left

render_right

效果展示

总结

附录

源码

公告

搜索

常用链接

最新随笔

积分与排名

合集

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论