跳到主要内容

文本输入

文本输入是可编辑的文本字段,例如搜索栏、登录表单或聊天框。用户可以点击或按 Tab 进入字段、输入、选择文本以及粘贴,而无需你自行实现这些行为。

每个文本输入都是一个状态化组件,基于 Rive 内置的 Text Input 库构建。它的外观和值都是 View Model 属性。这意味着你可以在动画模式中为它们设置关键帧,通过数据绑定绑定它们,并用监听器响应输入。

创建文本输入(Creating a text input)​

  1. 打开工具栏中的文本工具菜单,选择 Text Input。

  2. 点击画板创建单行输入,或拖动以按你绘制的尺寸创建多行输入。

点击会创建一个 200 × 40 的单行字段,文本垂直居中。拖动会创建一个多行字段,文本顶部对齐,并带有额外的上下内边距。

在现有布局(Layout)上绘制,即可将输入加入该布局。在空白画板上绘制,会把输入放在该位置,并包在它自己的绝对定位布局中。

要试用输入,切换到动画模式,选择一个状态机并播放。点击字段使其获得焦点,然后输入。

💡

放置输入时按 Esc 可取消。

配置文本输入(Configuring a text input)​

选中文本输入后,可在 Inspector 的 Text Input 部分编辑其属性。

对齐(Alignment)​

使用该部分顶部的对齐开关,设置字段内文本的水平和垂直对齐。

值(Value)​

  • Value: 字段中的文本。设置它可为字段提供初始值,或绑定它以便在运行时读写文本。
  • Font: 字体、大小和字重。
  • Text color: 已输入文本的颜色。
  • Multiline: 允许文本换行到多行,并允许用户输入换行。搜索栏等单行字段请关闭此选项。
  • Obscure: 将文本显示为圆点。用于密码字段。

占位符(Placeholder)​

  • Placeholder: 字段为空时显示的文本,例如 "Search" 或 "Email address."
  • Placeholder color: 占位符文本的颜色。

选区(Selection)​

  • Cursor color: 文本光标的颜色。
  • Selection color: 所选文本背后的高亮颜色。
  • Selection radius: 选区高亮的圆角半径。

容器(Container)​

  • Background color: 字段的填充颜色。
  • Stroke color: 边框颜色和宽度。
  • Padding: 边框与文本之间的间距。可设置水平和垂直内边距,或切换为分别设置各边。
  • Corner radius: 圆化字段的圆角。圆角默认联动;取消联动后可分别设置每个角。

焦点(Focus)​

点击该部分底部的 Focus 可触发输入的焦点 trigger。状态机播放时,这会让字段获得焦点。将该 trigger 绑定后,即可从你自己的逻辑聚焦字段,例如在表单打开时。

该部分中的每个属性都可以像其他 View Model 属性一样设置关键帧和绑定。将鼠标悬停在属性上并点击绑定按钮即可绑定它。

响应文本输入(Responding to text input)​

添加监听器,以便在用户与文本输入交互时作出响应:

  • Text Input: 当字段拥有焦点并输入文本时触发。
  • Focus 和 Blur: 当字段获得或失去焦点时触发。可用于为焦点环做动画或显示提示。

设置监听器及其动作请参见监听器。在脚本中,使用 ListenerContext 检查文本输入事件,并读取其 TextInput 数据。

💡

要在应用中读取字段文本,请将 Value 绑定到 View Model 上的字符串属性,而不是处理每一次按键。

运行时支持(Runtime support)​

文本输入需要宿主应用提供键盘和文本输入,因此仅在会将这些输入传递给 Rive 的运行时中可用。

目前各运行时对该功能均为 Coming soon(Web Canvas Lite 为 NA)。请参阅功能支持了解各运行时的完整功能列表。

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群