目录
ArkUI 文本框：开启用户输入的大门
一、创建与基础设置
（一）创建输入框
（二）设置输入框类型
（三）自定义样式
二、核心功能：获取输入与数据上传
（一）绑定 onChange 事件获取内容
（二）将输入信息处理成数据上传
三、通用事件交互操作
（一）常见通用事件介绍
（二）事件示例与应用场景
四、实际应用案例
（一）登录注册页面
（二）搜索功能实现
五、总结与展望
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)
还可以结合通用属性实现更丰富的样式。例如设置输入框的边框样式、圆角、字体大小、字体颜色等。设置输入框边框为 1 像素的灰色实线，圆角为 8 像素，字体大小为 16 像素，字体颜色为黑色：
TextInput({ placeholder: '请输入内容' })
.border({ width: 1, color: Color.Gray, style: BorderStyle.Solid })
.borderRadius(8)
.fontSize(16)
.fontColor(Color.Black);
二、核心功能：获取输入与数据上传
（一）绑定 onChange 事件获取内容
在 ArkUI 中，onChange事件就像是文本框的 “顺风耳”，能够实时捕捉到输入框内内容的任何变化。当用户在输入框中输入、删除或者修改文字时，onChange事件就会被触发，我们可以通过它来获取输入框内最新的内容。
绑定onChange事件非常简单，只需要在创建TextInput或TextArea组件时，使用.onChange方法，并传入一个回调函数即可。在回调函数中，我们可以通过参数获取到输入框当前的内容。以下是一个TextInput的示例代码：
@Entry
@Component
struct OnChangeSample {
@State inputValue: string = '';
build() {
Column() {
TextInput()
.onChange((value: string) => {
this.inputValue = value;
console.log('当前输入框内容为:', value);
});
Text(`当前输入的内容是: ${this.inputValue}`).margin(10);
}
}
}
在上述代码中，我们创建了一个TextInput组件，并为其绑定了onChange事件。当输入框内容发生变化时，回调函数会将最新的内容赋值给inputValue状态变量，并在控制台打印当前输入框内容。同时，通过Text组件实时展示当前输入的内容。
在实际应用中，比如在一个实时搜索功能中，当用户在搜索框中输入关键词时，通过绑定onChange事件，我们可以立即获取用户输入的关键词，并根据关键词去后台查询相关数据，实现搜索结果的实时更新，给用户带来更流畅的搜索体验。又比如在一个聊天输入框中，每当用户输入新内容，onChange事件就可以触发对输入内容的实时校验，检查是否包含敏感词汇等 。
（二）将输入信息处理成数据上传
当我们通过onChange事件获取到用户输入的信息后，接下来就需要将这些信息处理成符合服务器要求的数据格式，然后进行上传。这个过程就像是将杂乱的原材料加工成标准的产品，再发送出去。
处理用户输入信息为数据的步骤通常包括数据验证、格式化等。数据验证就是检查用户输入的数据是否符合要求，比如输入的邮箱地址是否格式正确，输入的密码是否满足长度和复杂度要求等。格式化则是将数据转换为特定的格式，例如将日期字符串转换为统一的日期格式。以注册页面输入用户名和密码为例，我们可以进行如下的数据验证和格式化：
function validateUserData(username: string, password: string): boolean {
// 简单的用户名验证，要求长度至少为3位
if (username.length < 3) {
console.log('用户名长度至少为3位');
return false;
}
// 简单的密码验证，要求长度至少为6位，包含数字和字母
const passwordRegex = /^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9]{6,}$/;
if (!passwordRegex.test(password)) {
console.log('密码长度至少为6位，且需包含数字和字母');
return false;
}
return true;
}
上传数据通常会使用网络请求相关的 API，比如fetch。假设我们有一个处理用户注册信息的函数，在验证数据通过后，使用fetch将数据上传到服务器，代码框架如下：
async function registerUser(username: string, password: string) {
if (!validateUserData(username, password)) {
return;
}
const data = {
username: username,
password: password
};
try {
const response = await fetch('https://example.com/api/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('注册结果:', result);
} catch (error) {
console.error('注册失败:', error);
}
}
在上述代码中，registerUser函数首先调用validateUserData函数验证用户名和密码。验证通过后，将数据组装成一个对象，然后使用fetch发送一个 POST 请求到服务器的注册接口。请求的headers设置为application/json，表示发送的数据是 JSON 格式，body则是将数据对象转换为 JSON 字符串后发送。服务器接收到数据后，会进行相应的处理，并返回注册结果。如果在请求过程中发生错误，会在控制台打印错误信息。通过这样的方式，就实现了将用户输入信息处理成数据并上传的功能。
三、通用事件交互操作
除了onChange事件外，ArkUI 文本框还支持一系列通用事件，通过这些通用事件，我们能够实现更加丰富的交互功能，提升用户体验。这些通用事件就像是为文本框赋予了更多的 “智慧”，让它能够根据用户的不同操作做出多样化的反应。
（一）常见通用事件介绍
onFocus：当输入框获得焦点时触发，比如用户点击输入框，准备开始输入内容时，该事件就会被触发。在一个表单填写页面中，当用户点击用户名输入框时，我们可以通过onFocus事件改变输入框的边框颜色，提示用户当前可以在此输入内容 ，让用户更清晰地知道当前的输入焦点所在。
onBlur：与onFocus相反，当输入框失去焦点时触发。例如用户在输入框中输入完内容后，点击页面其他地方，输入框失去焦点，此时onBlur事件被触发。在一些需要实时验证输入内容的场景中，当输入框失去焦点时，我们可以利用onBlur事件对输入内容进行格式校验，如验证邮箱格式是否正确、手机号码是否符合规范等 。
onSubmit：当用户在输入框中输入内容后，按下回车键时触发。在搜索框场景中，用户输入关键词后，按下回车键，就可以通过onSubmit事件触发搜索操作，无需用户再去点击搜索按钮，提高搜索效率。
（二）事件示例与应用场景
登录注册场景：在登录注册页面中，我们可以综合运用这些通用事件。当用户名输入框获得焦点时，通过onFocus事件改变输入框的背景颜色为淡蓝色，提示用户可以输入用户名；当用户输入完用户名，点击密码输入框，用户名输入框失去焦点，此时onBlur事件触发，我们可以验证用户名是否为空，如果为空，弹出提示框提示用户输入用户名 。在密码输入框中，当用户输入完密码并按下回车键时，onSubmit事件触发，执行登录验证逻辑，检查用户名和密码是否匹配，示例代码如下：
@Entry
@Component
struct LoginPage {
@State username: string = '';
@State password: string = '';
build() {
Column() {
TextInput({ placeholder: '请输入用户名', text: this.username })
.onFocus(() => {
this.usernameInputBgColor = Color.LightBlue;
})
.onBlur(() => {
if (this.username === '') {
prompt.showToast({ message: '请输入用户名' });
} else {
this.usernameInputBgColor = Color.White;
}
});
TextInput({ placeholder: '请输入密码', text: this.password, type: InputType.Password })
.onSubmit(() => {
this.login();
});
Button('登录').onClick(() => {
this.login();
});
}
}
login() {
// 登录验证逻辑
if (this.username === 'admin' && this.password === '123456') {
console.log('登录成功');
} else {
console.log('用户名或密码错误');
}
}
}
搜索功能场景：以一个商品搜索功能为例，当用户在搜索框中输入内容时，通过onChange事件实时获取输入的关键词，并根据关键词进行搜索提示；当搜索框获得焦点时，onFocus事件触发，显示历史搜索记录；当用户输入完关键词并按下回车键，onSubmit事件触发，执行搜索操作，展示搜索结果。示例代码如下：
@Entry
@Component
struct SearchPage {
@State searchKeyword: string = '';
@State searchHistory: string[] = [];
@State searchResults: string[] = [];
build() {
Column() {
TextInput({ placeholder: '请输入搜索关键词', text: this.searchKeyword })
.onChange((value: string) => {
this.searchKeyword = value;
// 根据输入关键词实时获取搜索提示，这里简单模拟为包含关键词的历史搜索记录
this.searchSuggestions = this.searchHistory.filter(item => item.includes(value));
})
.onFocus(() => {
// 显示历史搜索记录
this.showSearchHistory = true;
})
.onSubmit(() => {
this.search();
});
// 搜索提示列表
if (this.showSearchHistory && this.searchSuggestions.length > 0) {
List({ space: 5 }) {
ForEach(this.searchSuggestions, (item) => {
ListItem() {
Text(item).onClick(() => {
this.searchKeyword = item;
this.showSearchHistory = false;
this.search();
});
});
});
};
}
// 搜索结果展示
if (this.searchResults.length > 0) {
List({ space: 5 }) {
ForEach(this.searchResults, (item) => {
ListItem() {
Text(item);
};
});
};
}
}
}
search() {
// 搜索逻辑，这里简单模拟为包含关键词的固定数据
const allProducts = ['苹果', '香蕉', '橙子', '西瓜', '草莓'];
this.searchResults = allProducts.filter(product => product.includes(this.searchKeyword));
}
}
通过上述这些通用事件的应用，我们可以为用户打造更加便捷、高效、交互性强的应用体验，让用户在使用应用时更加得心应手。
四、实际应用案例
（一）登录注册页面
在登录注册页面中，文本框起着至关重要的作用，用于获取用户输入的用户名和密码信息。以下是一个简单的登录页面示例代码，展示了如何使用 ArkUI 文本框实现这一功能：
@Entry
@Component
struct LoginPage {
@State username: string = '';
@State password: string = '';
build() {
Column() {
TextInput({ placeholder: '请输入用户名', text: this.username })
.onChange((value: string) => {
this.username = value;
})
.onFocus(() => {
// 获得焦点时，改变边框颜色为蓝色
this.usernameBorderColor = Color.Blue;
})
.onBlur(() => {
// 失去焦点时，恢复边框颜色为灰色
this.usernameBorderColor = Color.Gray;
});
TextInput({ placeholder: '请输入密码', text: this.password, type: InputType.Password })
.onChange((value: string) => {
this.password = value;
})
.onFocus(() => {
this.passwordBorderColor = Color.Blue;
})
.onBlur(() => {
this.passwordBorderColor = Color.Gray;
});
Button('登录').onClick(() => {
this.login();
});
}
}
login() {
// 这里进行登录验证逻辑，如调用后端接口验证用户名和密码
if (this.username === 'admin' && this.password === '123456') {
console.log('登录成功');
} else {
console.log('用户名或密码错误');
}
}
}
在上述代码中，我们创建了两个TextInput组件，分别用于输入用户名和密码。通过onChange事件实时获取用户输入的内容，并更新相应的状态变量。同时，利用onFocus和onBlur事件，在输入框获得焦点和失去焦点时，改变输入框的边框颜色，给予用户明确的交互反馈。当用户点击 “登录” 按钮时，调用login方法进行登录验证逻辑。
在实际的登录注册场景中，用户的操作流程一般是：首先进入登录页面，看到用户名和密码输入框。点击用户名输入框，输入框获得焦点，边框颜色变为蓝色，提示用户可以输入用户名；输入完成后，点击密码输入框，用户名输入框失去焦点，边框颜色变回灰色，同时密码输入框获得焦点，边框颜色变为蓝色；用户输入密码，输入完成后点击登录按钮。此时，应用会将用户输入的用户名和密码发送到服务器进行验证，根据验证结果给出相应的提示，如登录成功跳转到主页面，或者提示用户名或密码错误 。通过这样的交互设计，能够让用户清晰地了解操作流程，提高登录注册的成功率和用户体验。
（二）搜索功能实现
搜索功能是各类应用中非常常见且重要的功能，而文本框在其中扮演着核心角色。它结合搜索按钮，能够帮助用户快速查找所需的信息。下面以一个简单的商品搜索功能为例，介绍其实现原理和代码。
实现原理：用户在文本框中输入搜索关键词，通过onChange事件实时获取输入的关键词，并根据关键词对数据源进行过滤筛选；当用户点击搜索按钮或者在输入框中按下回车键时，触发搜索操作，将筛选后的结果展示给用户。
示例代码如下：
@Entry
@Component
struct SearchPage {
@State searchKeyword: string = '';
@State productList: string[] = ['苹果', '香蕉', '橙子', '西瓜', '草莓', '芒果', '葡萄'];
@State searchResults: string[] = [];
build() {
Column() {
TextInput({ placeholder: '请输入搜索关键词', text: this.searchKeyword })
.onChange((value: string) => {
this.searchKeyword = value;
this.search();
})
.onSubmit(() => {
this.search();
});
Button('搜索').onClick(() => {
this.search();
});
if (this.searchResults.length > 0) {
List({ space: 5 }) {
ForEach(this.searchResults, (item) => {
ListItem() {
Text(item);
};
});
};
}
}
}
search() {
this.searchResults = this.productList.filter(product => product.includes(this.searchKeyword));
}
}
在上述代码中，我们创建了一个TextInput组件作为搜索框，一个Button组件作为搜索按钮。通过onChange事件，当用户输入关键词时，实时调用search方法进行搜索；onSubmit事件则在用户按下回车键时触发搜索操作。search方法通过filter函数对productList数据源进行筛选，只保留包含搜索关键词的商品，将筛选结果存储在searchResults状态变量中，并通过List组件展示给用户。这样，用户就可以通过在搜索框中输入关键词，快速查找自己感兴趣的商品，大大提高了信息查找的效率，为用户提供了便捷的搜索体验。
五、总结与展望
ArkUI 文本框作为鸿蒙应用开发中获取用户输入信息的关键组件，拥有创建简单、样式自定义丰富的特点，通过绑定onChange事件能够实时获取输入框内改变的内容，将用户输入信息处理成数据进行上传 ，并且支持多种通用事件实现丰富的交互操作。在登录注册、搜索功能等实际应用场景中，ArkUI 文本框都发挥着不可或缺的作用，为用户提供了便捷、高效的交互体验。
展望未来，随着鸿蒙系统生态的不断发展和完善，ArkUI 文本框也将持续进化。一方面，它可能会在性能优化上更进一步，实现更快速的数据处理和上传，提升应用的响应速度，为用户带来更流畅的使用感受。另一方面，在交互设计上，有望支持更多新颖的交互方式，比如结合手势操作、语音输入等，满足用户多样化的输入需求，为应用开发开辟更多创新空间，助力开发者打造出更加智能、人性化的应用程序，在全场景应用开发中绽放更加耀眼的光彩。
暂无评论内容