TextInput
、TextArea
是输入框组件,通常用于响应用户的输入操作,比如评论区的输入、聊天框的输入、表格的输入等,也可以结合其它组件构建功能页面,例如登录注册页面。
创建输入框
TextInput
为单行输入框、TextArea
为多行输入框。通过以下接口来创建。
单行输入框
对应代码
ts
TextInput()
多行输入框
对应代码
ts
TextArea()
设置输入框类型
TextInput
有5种可选类型,分别为 Normal
基本输入模式、Password
密码输入模式、Email
邮箱地址输入模式、Number
纯数字输入模式、PhoneNumber
电话号码输入模式。通过 type
属性进行设置:
基本输入模式(默认类型)
ts
TextInput()
.type(InputType.Normal)
密码输入模式
ts
TextInput()
.type(InputType.Password)
自定义样式
设置无输入时的提示文本。
ts
TextInput({placeholder:'我是提示文本'})
设置输入框当前的文本内容。
ts
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
添加 backgroundColor 改变输入框的背景颜色。
ts
TextInput({placeholder:'我是提示文本',text:'我是当前文本内容'})
.backgroundColor(Color.Pink)
添加事件
文本框主要用于获取用户输入的信息,把信息处理成数据进行上传,绑定 onChange
事件可以获取输入框内改变的内容。用户也可以使用通用事件来进行相应的交互操作。
ts
TextInput()
.onChange((value: string) => {
console.info(value);
})
.onFocus(() => {
console.info('获取焦点');
})