Cursive 终端 UI 框架教程：构建可交互的列表应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01172/article/details/148524455

Cursive 终端 UI 框架教程：构建可交互的列表应用

cursive A Text User Interface library for the Rust programming language 项目地址: https://gitcode.com/gh_mirrors/cu/cursive

前言

在之前的 Cursive 教程中，我们已经学习了如何创建基本的 UI 元素和对话框。本文将深入探讨如何构建一个具有完整交互功能的列表应用，重点介绍视图的可变性和组件间的交互。

项目概述

我们将创建一个简单的用户档案管理应用，主要功能包括：

显示用户列表
添加新用户
删除现有用户
查看用户详情

核心组件解析

1. SelectView 列表视图

SelectView 是 Cursive 中用于显示可选择列表的核心组件。我们创建一个存储字符串的列表：

let select = SelectView::<String>::new()
    .on_submit(on_submit)  // 设置提交回调
    .with_name("select")   // 为视图命名以便后续引用
    .fixed_size((10, 5));  // 固定视图尺寸

关键点：

on_submit 定义了当用户选择项目时的回调函数
with_name 为视图命名，这是实现视图间交互的关键
fixed_size 确保视图保持固定尺寸，避免界面跳动

2. 线性布局管理

应用界面采用嵌套的线性布局：

let buttons = LinearLayout::vertical()
    .child(Button::new("Add new", add_name))
    .child(Button::new("Delete", delete_name))
    .child(DummyView)  // 作为间隔
    .child(Button::new("Quit", Cursive::quit));

siv.add_layer(Dialog::around(LinearLayout::horizontal()
        .child(select)
        .child(DummyView)
        .child(buttons))
    .title("Select a profile"));

布局特点：

外层水平布局包含列表和按钮列
内层垂直布局组织按钮
DummyView 作为间隔元素使用

交互实现机制

1. 视图引用与修改

Cursive 通过名称系统实现视图间的交互：

s.call_on_name("select", |view: &mut SelectView<String>| {
    view.add_item_str(name)
});

这种模式避免了直接持有视图引用带来的生命周期问题，是 Cursive 中实现可变性的推荐方式。

2. 添加用户功能

添加用户的实现展示了完整的交互流程：

fn add_name(s: &mut Cursive) {
    fn ok(s: &mut Cursive, name: &str) {
        // 通过名称获取并修改SelectView
        s.call_on_name("select", |view: &mut SelectView<String>| {
            view.add_item_str(name)
        });
        s.pop_layer();
    }

    // 创建包含EditView的对话框
    s.add_layer(Dialog::around(EditView::new()
            .on_submit(ok)
            .with_name("name")
            .fixed_width(10))
        .title("Enter a new name")
        .button("Ok", |s| {
            let name = s.call_on_name("name", |view: &mut EditView| {
                view.get_content()
            }).unwrap();
            ok(s, &name);
        })
        .button("Cancel", |s| s.pop_layer()));
}

3. 删除用户功能

删除功能展示了另一种视图操作方式：

fn delete_name(s: &mut Cursive) {
    let mut select = s.find_name::<SelectView<String>>("select").unwrap();
    match select.selected_id() {
        None => s.add_layer(Dialog::info("No name to remove")),
        Some(focus) => {
            select.remove_item(focus);
        }
    }
}

这里使用 find_name 直接获取视图的可变引用，适用于需要多次操作视图的场景。