Input

Inputgpui-base 的单行文本控件。它负责编辑、焦点、选择、键盘输入、IME、掩码、验证与事件,表现由应用提供。普通多行文本使用 Textarea,源代码使用 Editor

#导入

use gpui_kit::base::input::{Input, InputEvent, InputState};

#基本用法

持久状态只创建一次,再用对应 entity 渲染 Input

let input = cx.new(|cx| {
    InputState::new(window, cx)
        .placeholder("Account name")
        .default_value("Ada")
});

Input::new(&input)

通过状态读取和更新值:

let value = input.read(cx).value();
input.update(cx, |state, cx| state.set_value("Grace", window, cx));

#掩码与验证

let password = cx.new(|cx| {
    InputState::new(window, cx)
        .placeholder("Password")
        .masked(true)
        .validate(|value, _| value.chars().count() >= 8)
});

格式化值可按需组合 mask_patternpatternminmaxstepstep_byunmask_value() 返回掩码输入的底层值。

#事件

InputState 会发出 InputEvent::ChangePressEnterFocusBlur。订阅事件后读取新值,并在更新宿主状态后调用 cx.notify()

#表现

gpui-base 不安装产品样式。向状态提供 InputEditorStyle,并把控件组合进自己的边框容器。若需要现成主题、尺寸、边框、前后缀槽位和清除按钮,请使用 gpui-component Input

#可运行示例

cargo run -p gpui-base-examples -- input

实现位于 input.rs

#原子行内 token

需要让用户整块选中、删除人员提及或资源引用时,可以使用 token。通过已有的 InputState 插入:

use gpui_kit::base::input::InlineToken;

input.update(cx, |state, cx| {
    state.replace_with_token(
        InlineToken::new("person-1", "@alice").with_label("Alice"),
        window,
        cx,
    ).expect("有效的引用");
});

token 默认显示为无装饰标签。通过 token 槽位提供自己的单行元素,通过 on_token_click 打开引用。复制和 value() 返回 @alice 这样的真实文本。用 content() 保存草稿、set_value(content) 恢复草稿,可以保留其中的引用。

自定义展示、草稿恢复和范围单位见 Input 的 token 示例。数据类型从 gpui_kit::base::input 导入。JavaScript 使用 gpui-base 中的 InputState.new(),它提供相同的 token 方法。