Skip to Content
组件Input

Input

Input 是标准文本输入框。

Input
Input 终端效果图
Input 的终端效果图

最小示例

let field = Input::new()
    .value(self.draft.clone())
    .placeholder("Type a command")
    .on_change(Message::DraftChanged)
    .on_submit(|value| Some(Message::Submit(value)))
    .layout(Layout { width: Length::Fill, height: Length::Fixed(3) })
    .build();

什么时候用

  • 用户要直接输入文本
  • 你需要 on_change 和 on_submit
  • rerender 之后 cursor 连续性很重要

关键 builder 方法

  • Input::new()
  • .value(...)
  • .placeholder(...)
  • .on_change(...)
  • .on_submit(...)
  • .style(...)

在 view! 里怎么写

view! {
  <Input
    value={self.draft.clone()}
    placeholder={"Type a command".to_string()}
    on_change={Message::DraftChanged}
    on_submit={|value| Some(Message::Submit(value))}
  />
}

状态边界

Input 最好配合下面这种分层来理解：

  • 正在编辑的 draft 放在本地或 app state
  • submit 把 draft 变成 message
  • rerender 之后由 runtime 保住 cursor 连续性

去哪里看真实用法

Last updated on
StreamingTextList