目录
ArkUI 文本框：开启用户输入的大门
在如今的数字化时代，无论是我们日常使用的社交软件、购物平台，还是各类办公、学习类应用，与用户进行交互，获取用户输入的信息都是必不可少的环节。而在鸿蒙系统的应用开发中，ArkUI 文本框就扮演着这样一个关键角色，它就像是一扇开启用户输入大门的钥匙，让应用能够与用户进行有效的沟通。
当我们在电商 APP 中搜索心仪商品时，在搜索框中输入关键词；在社交软件里与朋友聊天，在输入框中敲下文字；又或者在办公软件里填写各种表单数据，这些场景中都离不开文本框的身影 。ArkUI 文本框作为获取用户输入信息的关键组件，能够将用户随意输入的文字、数字等内容，按照应用程序的需求处理成结构化的数据，然后上传到服务器进行进一步的分析、存储或其他操作。比如电商 APP 就可以通过分析用户搜索关键词，了解用户的购物偏好，为用户精准推荐商品。
一、创建与基础设置
（一）创建输入框
在 ArkUI 中创建输入框非常简单，我们主要有两种类型的输入框可供选择：用于单行输入的 TextInput 和用于多行输入的 TextArea。
如果我们需要用户输入简短的信息，比如搜索关键词、用户名等，就可以使用 TextInput。示例代码如下：
@Entry
@Component
struct TextInputSample {
build() {
Column() {
TextInput({ placeholder: '请输入搜索关键词' })
}
}
}
上述代码中，通过TextInput创建了一个单行输入框，并使用placeholder属性设置了提示文本，当输入框没有内容时，就会显示 “请输入搜索关键词”。
而当我们需要用户输入较长的文本内容，像评论、备注等，TextArea就派上用场了。示例代码如下：
@Entry
@Component
struct TextAreaSample {
build() {
Column() {
TextArea({ placeholder: '请输入你的评论', rows: 5 })
}
}
}
在这段代码里，TextArea创建了一个多行输入框，同样设置了提示文本，rows属性指定了输入框默认显示的行数为 5 。
（二）设置输入框类型
为了满足不同场景下的输入需求，ArkUI 的TextInput提供了 9 种可选的输入模式，通过type属性进行设置。这 9 种类型分别是：
- Normal：基本输入模式，这是默认类型，适用于大多数普通文本输入场景，比如一般的文本描述、留言等。例如在一个简单的便签应用中，用户输入便签内容就可以使用这种模式：
TextInput().type(InputType.Normal)
- Password：密码输入模式，在输入时会隐藏输入内容，通常显示为圆点或星号，用于密码输入场景，保障用户密码安全。在各类应用的登录界面，输入密码时就会用到：
TextInput().type(InputType.Password)
- Email：邮箱地址输入模式，会对输入内容进行一定的格式校验，确保输入的内容符合邮箱地址的格式规范，方便用户快速准确地输入邮箱。在注册账号需要填写邮箱时：
TextInput().type(InputType.Email)
- Number：纯数字输入模式，只允许输入数字，常用于需要输入数字的场景，像年龄、数量等。比如在电商 APP 中输入购买商品的数量：
TextInput().type(InputType.Number)
- PhoneNumber：电话号码输入模式，对输入内容进行电话号码格式校验，方便用户输入电话号码。在填写联系方式时：
TextInput().type(InputType.PhoneNumber)
- USER_NAME：用户名输入模式，可用于登录、注册等场景的用户名输入。在应用的注册页面输入用户名：
TextInput().type(InputType.USER_NAME)
- NEW_PASSWORD：新密码输入模式，用于注册、修改密码等场景的新密码输入。在修改密码时：
TextInput().type(InputType.NEW_PASSWORD)
- NUMBER_PASSWORD：纯数字密码输入模式，仅支持输入数字，并且在输入时隐藏内容，用于需要纯数字密码的场景。例如一些简单的数字密码登录场景：
TextInput().type(InputType.NUMBER_PASSWORD)
- NUMBER_DECIMAL：带小数点的数字输入模式，适用于需要输入小数的场景，比如输入价格、体重等带有小数的数据。在输入商品价格时：
TextInput().type(InputType.NUMBER_DECIMAL)
（三）自定义样式
为了让输入框更好地融入应用界面风格，提升用户体验，我们可以对其进行丰富的样式自定义。
通过placeholder属性可以设置无输入时的提示文本，让用户清楚知道该输入框的用途。像前面创建输入框示例中就有使用：
TextInput({ placeholder: '请输入搜索关键词' })
使用text属性可以设置输入框当前的文本内容。不过建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextInput中的文本内容异常。从 API version 10 开始，该参数支持$$双向绑定变量。示例如下：
@Entry
@Component
struct TextInputStyleSample {
@State currentText: string = '初始文本内容';
build() {
Column() {
TextInput({ placeholder: '这是提示文本', text: this.currentText })
}
}
}
通过backgroundColor属性可以改变输入框的背景颜色，使其与界面其他元素相协调。比如将输入框背景设置为淡蓝色：
TextInput({ placeholder: '我是提示文本', text: '我是当前文本内容' }).backgroundColor(Color.LightBlue)
最低0.47元/天 解锁文章
扫一扫
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
