UITextInput 组件

文本输入组件。UITextInput 依赖 KeyboardInputComponent 的键盘接口,将键盘输入的文字内容设置到对应的 UILabel 上。

组件属性

属性名 类型 默认值 说明
label UILabel null 文本输入组件。UITextInput 对应的 UILabel。键盘输入的内容会设置到该 UILabel 上。
editable boolean true 是否可输入文本。
text string "" 输入框的文本内容,该属性将覆盖 UILabel 的 text。
type enum "done" 键盘右下角 confirm 按钮的类型,只影响按钮的文本内容。done 完成,next 下一个,search 搜索,go 前往,send 发送。
prompt string "" 提示文本,将在 text === "" 时显示
promptColor Color new Color(0, 0, 0, 255) 提示文本的颜色
maxChar number 0 最大字符数,输入超过该字数时会被截断,0 为不限制
multiline boolean false 是否多行文本
align enum 1 强制设置的 UILabel 的水平对齐方式。水平对齐方式,1 左对齐,2 居中对齐,3 右对齐

示例代码

示例代码 中的 UI 结构如下:

  • textInputBoxEntity 挂载 UIGraphic,负责展示一个有背景色的输入框
    • textInputEntity 挂载 UITextInput 处理来自键盘的输入,挂载 UIMask,遮挡 UILabel 超出 UITextInput 的文本内容
      • labelEntity 挂载 UILabel,展示文本内容
const textInputEntity = engine.Entity.createEntity2D("UITextInput");
const touch = textInputEntity.addComponent(engine.TouchInputComponent);
const keyboardInput = textInputEntity.addComponent(engine.KeyboardInputComponent);
const textInput = textInputEntity.addComponent(engine.UITextInput);

const graphic = textInputEntity.addComponent(engine.UIGraphic);
graphic.shape = engine.UIGraphic.Shape.Rect;
graphic.color = new engine.Color(255, 255, 255, 255);

const mask = textInputEntity.addComponent(engine.UIMask);

const labelEntity = engine.Entity.createEntity2D("UILabel");
const label = labelEntity.addComponent(engine.UILabel)

label.fontColor = new engine.Color(255, 0, 0, 255);
label.fontSize = 120;
label.text = String.fromCodePoint(55356, 57144)

label.align = 3;
label.underline = 20;
label.underlineColor = new engine.Color(255, 0, 0, 255);

labelEntity.transform2D.size.x = 400;
labelEntity.transform2D.size.y = 100;

textInput.prompt = "请输入";
textInput.fontSize = 140
textInput.promptColor = new engine.Color(255, 0, 0, 255);
textInput.maxChar = 300;
textInput.label = label;

textInputEntity.transform2D.size.x = 400;
textInputEntity.transform2D.size.y = 100;

const textInputBoxEntity = engine.Entity.createEntity2D("box")
const graphic = textInputBoxEntity.addComponent(engine.UIGraphic);
graphic.color = new engine.Color(0, 255, 0, 100);
graphic.shape = engine.UIGraphic.Shape.Rect;
textInputBoxEntity.transform2D.size.x = 400;
textInputBoxEntity.transform2D.size.y = 100;

textInputEntity.transform2D.addChild(labelEntity.transform2D);
textInputBoxEntity.transform2D.addChild(textInputEntity.transform2D);