鸿蒙应用开发从入门到实战（十一）：ArkUI组件Text&TextInput

Text组件：静态文本显示的基础在鸿蒙应用开发中，Text组件是最基础的文本显示单元，类似于其他平台中的Label或TextView。它负责在界面上展示静态文本内容，支持丰富的样式定制。### Text组件的核心属性Text组件通过@State装饰器管理状态，支持以下关键属性：- text：要显示的文本内容- fontSize：字体大小，单位fp（像素密度无关）- fontWeight：字体粗细（FontWeight.Bold等）- fontColor：字体颜色- textAlign：文本对齐方式（TextAlign.Start/Center/End）- maxLines：最大行数，超出部分显示省略号- textOverflow：文本溢出处理方式### 基础使用示例typescript// TextDemo.ets - 展示Text组件的基础用法@Entry@Componentstruct TextDemo { @State message: string = '鸿蒙开发入门' build() { Column() { // 基础文本显示 Text('Hello HarmonyOS') .fontSize(24) .fontWeight(FontWeight.Bold) .fontColor('#FF007AFF') // 多行文本与截断 Text('这是一段很长的文本，用于演示多行文本的显示效果，超出两行时显示省略号...') .fontSize(16) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) // 动态绑定状态变量 Text(`当前消息：${this.message}`) .fontSize(18) .padding(10) } .padding(20) .width('100%') .height('100%') }}## TextInput组件：用户交互的入口TextInput是用户输入文本的核心组件，支持单行和多行输入，是表单交互的基础。### TextInput的关键特性- placeholder：占位提示文本- text：当前输入内容（双向绑定）- type：输入类型（InputType.Normal/Password/Email）- maxLength：最大输入字符数- enterKeyType：回车键类型（EnterKeyType.Search/Send/Next）- onChange：输入变化时的回调- onSubmit：提交时的回调### 完整交互示例typescript// TextInputDemo.ets - 演示TextInput的交互用法@Entry@Componentstruct TextInputDemo { @State userName: string = '' // 用户名输入 @State password: string = '' // 密码输入 @State loginStatus: string = '' // 登录状态提示 @State inputCount: number = 0 // 输入字符计数 build() { Column({ space: 20 }) { // 用户名输入框 TextInput({ placeholder: '请输入用户名', text: this.userName }) .onChange((value: string) => { this.userName = value this.inputCount = value.length }) // 密码输入框（带安全输入） TextInput({ placeholder: '请输入密码', text: this.password }) .type(InputType.Password) .maxLength(16) // 限制密码长度 .onChange((value: string) => { this.password = value }) // 显示输入统计 Text(`已输入：${this.inputCount} 字符`) .fontSize(14) .fontColor('#666') // 登录按钮 Button('登录') .width('80%') .onClick(() => { if (this.userName && this.password) { this.loginStatus = `登录成功！用户：${this.userName}` } else { this.loginStatus = '请输入用户名和密码' } }) // 状态反馈 Text(this.loginStatus) .fontSize(16) .fontColor(this.loginStatus.includes('成功') ? '#00CC00' : '#FF0000') } .padding(20) .width('100%') .height('100%') }}## 高级用法与实战技巧### 1. 文本样式组合Text组件支持丰富的样式组合，包括阴影、渐变、下划线、斜体等。typescriptText('装饰文本示例') .fontSize(30) .fontWeight(FontWeight.Bold) .shadow({ radius: 4, color: '#888' }) // 添加阴影 .fontColor('#FF0000') .decoration({ type: TextDecorationType.Underline }) // 下划线### 2. 输入验证与格式控制在实际应用中，经常需要对输入进行验证：typescript// 只允许数字输入TextInput({ placeholder: '输入年龄' }) .onChange((value: string) => { // 过滤非数字字符 const filtered = value.replace(/[^0-9]/g, '') // 限制范围 1-150 if (parseInt(filtered) > 150) { // 处理超出范围的情况 return } // 更新实际输入 })### 3. 结合状态管理实现动态UI使用@State和@Link实现跨组件数据同步：typescript@Componentstruct SearchBar { @State searchText: string = '' build() { TextInput({ placeholder: '搜索...', text: this.searchText }) .enterKeyType(EnterKeyType.Search) .onSubmit(() => { console.log(`搜索内容：${this.searchText}`) }) }}### 4. 性能优化建议- 对于静态文本，使用const声明而非@State- 避免在TextInput的onChange中执行复杂计算- 使用debounce技术减少频繁触发- 对大量列表项使用LazyForEach懒加载## 实战：登录表单组件整合Text和TextInput，构建一个功能完整的登录表单：typescript@Entry@Componentstruct LoginForm { @State email: string = '' @State password: string = '' @State showPassword: boolean = false @State errorMessage: string = '' build() { Column({ space: 15 }) { // 标题 Text('用户登录') .fontSize(28) .fontWeight(FontWeight.Bold) .padding({ bottom: 30 }) // 邮箱输入 Text('邮箱地址') .fontSize(14) .fontColor('#666') TextInput({ placeholder: '请输入邮箱', text: this.email }) .type(InputType.Email) .onChange((value: string) => { this.email = value this.errorMessage = '' }) // 密码输入 Text('密码') .fontSize(14) .fontColor('#666') TextInput({ placeholder: '请输入密码', text: this.password }) .type(this.showPassword ? InputType.Normal : InputType.Password) .onChange((value: string) => { this.password = value this.errorMessage = '' }) // 显示/隐藏密码按钮 Button(this.showPassword ? '隐藏密码' : '显示密码') .fontSize(12) .width(100) .onClick(() => { this.showPassword = !this.showPassword }) // 错误提示 Text(this.errorMessage) .fontSize(14) .fontColor('#FF0000') .visibility(this.errorMessage ? Visibility.Visible : Visibility.Hidden) // 登录按钮 Button('登录') .width('80%') .height(45) .onClick(() => { if (!this.email.includes('@')) { this.errorMessage = '请输入有效的邮箱地址' return } if (this.password.length < 6) { this.errorMessage = '密码至少6位' return } console.log(`登录请求：${this.email}`) // 实际登录逻辑... }) } .padding(30) .width('100%') .height('100%') }}## 总结Text和TextInput是鸿蒙ArkUI中最基础但最重要的两个组件。Text负责静态文本展示，支持丰富的样式定制；TextInput则提供用户交互入口，支持多种输入类型和验证机制。掌握它们的基础用法和高级技巧，可以为构建复杂的用户界面打下坚实基础。在实际开发中，需要注意：1. 合理使用状态管理保持数据同步2. 对用户输入进行必要的验证和过滤3. 利用Text组件的样式能力提升界面美观度4. 注意性能优化，避免不必要的状态更新通过本教程的学习，你应该能够独立完成包含文本显示和输入功能的页面开发。继续深入学习，可以进一步探索组合组件、自定义组件等高级主题。