news 2026/7/25 3:14:54

HarmonyOS开发实战：小分享-ArkUI 表单组件——TextInput、TextArea、TextPicker

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HarmonyOS开发实战：小分享-ArkUI 表单组件——TextInput、TextArea、TextPicker

前言

表单组件是用户输入和交互的核心，小分享 App 中使用了 TextInput（搜索框）、TextArea（文字编辑）等表单组件。本篇集中讲解它们的核心属性和事件处理。详细 API 可参考 HarmonyOS TextInput 官方文档。

一、TextInput 组件

1.1 基本用法

TextInput({placeholder:'搜索内容、模板、用户',text:this.searchKey}).fontSize(14).backgroundColor(Color.Transparent).layoutWeight(1).onChange((value:string)=>{this.searchKey=value})

1.2 TextInput 常用属性

属性作用示例
placeholder占位符'请输入...'
text初始文本this.searchKey
onChange内容变化(value) => {}
type输入类型InputType.Normal
maxLength最大长度50
enterKeyType回车键类型EnterKeyType.Search

1.3 搜索框容器

Row({space:8}){Text('🔍').fontSize(16).fontColor('#999999')TextInput({placeholder:'搜索...',text:this.searchKey}).fontSize(14).backgroundColor(Color.Transparent).layoutWeight(1).onChange((value:string)=>{this.searchKey=value})}.width('100%').height(40).backgroundColor('#F5F5F5').borderRadius(20).padding({left:16,right:16})

二、TextArea 组件

2.1 基本用法

TextArea({text:'初始内容',placeholder:'输入你想分享的内容...'}).fontSize(15).fontColor('#333333').backgroundColor(Color.Transparent).width('100%').height(300).padding({left:16,right:16}).onChange((value:string)=>{this.textContent=value})

2.2 TextArea 常用属性

属性作用示例
text初始文本'内容'
placeholder占位符'输入...'
onChange内容变化(value) => {}
maxLength最大字符数500
editable是否可编辑true

三、TextPicker 组件

3.1 基本用法

TextPicker({range:['小','中','大'],selected:this.selectedSize}).onChange((value:string,index:number)=>{this.selectedSize=index})

3.2 TextPicker 常用属性

属性作用示例
range选项列表['小','中','大']
selected选中索引0
onChange值变化(value, index) => {}

四、表单组件对比

组件用途行数适用场景
TextInput单行输入1 行搜索框、用户名
TextArea多行输入多行文章编辑、评论
TextPicker选择器1 行选项选择

五、本文核心知识点

5.1 表单组件核心要点

  1. TextInput：单行输入，搜索框
  2. TextArea：多行输入，文章编辑
  3. TextPicker：选择器，选项选择

5.2 实战开发要点

  • TextInput 用 onChange 实现双向绑定
  • TextArea 设置 height 控制展开高度
  • 搜索框用 borderRadius(20) 圆角设计

相关资源

  • HarmonyOS TextInput 官方文档
  • HarmonyOS TextArea 组件
  • HarmonyOS TextPicker 组件
  • 开源鸿蒙跨平台社区

附录：表单组件的完整实现细节

1. TextInput 组件完整属性

属性作用示例
placeholder占位符'请输入...'
text初始文本this.searchKey
onChange内容变化(value) => {}
type输入类型InputType.Normal
maxLength最大长度50
enterKeyType回车键类型EnterKeyType.Search

2. TextArea 组件完整属性

TextArea({text:'初始内容',placeholder:'输入你想分享的内容...'}).fontSize(15).fontColor('#333333').backgroundColor(Color.Transparent).width('100%').height(300).padding({left:16,right:16}).onChange((value:string)=>{this.textContent=value})

3. TextPicker 组件

TextPicker({range:['小','中','大'],selected:this.selectedSize}).onChange((value:string,index:number)=>{this.selectedSize=index})

4. 表单组件对比

组件用途行数适用场景
TextInput单行输入1 行搜索框、用户名
TextArea多行输入多行文章编辑、评论
TextPicker选择器1 行选项选择

5. 完整代码文件索引

文件路径说明
多个页面文件使用表单组件

6. 总结

本文详细讲解了 ArkUI 三大表单组件 TextInput、TextArea、TextPicker 的完整属性和用法。

相关资源

  • HarmonyOS TextInput 官方文档：TextInput Reference
  • HarmonyOS TextArea 组件：TextArea Reference
  • HarmonyOS TextPicker 组件：TextPicker Reference
  • HarmonyOS 表单开发：Form Development
  • HarmonyOS 输入组件：Input Components
  • HarmonyOS 选择器：Picker Components
  • HarmonyOS 状态管理：State Management
  • 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
  • 状态管理进阶

本文涉及的所有 API 索引

API类别用途
Column布局容器垂直排列子组件
Row布局容器水平排列子组件
Text基础组件显示文本
ForEach渲染控制循环渲染列表
@State装饰器组件内状态管理
@Builder装饰器封装可复用 UI 片段
router.pushUrl路由页面跳转
router.back路由返回上一页

总结

本文详细讲解了小分享 App 中对应页面的完整实现。核心知识点涵盖布局容器、组件封装、状态管理、路由跳转等关键技术。通过本文的学习，读者可以掌握 HarmonyOS ArkUI 声明式开发的核心技能，并能够独立实现类似的页面功能。

相关资源

  • HarmonyOS 官方文档：https://developer.huawei.com/consumer/cn/doc/
  • ArkTS 语法指南：ArkTS Introduction
  • 状态管理指南：State Management
  • ArkUI 组件参考：ArkUI Components
  • 路由 API：Router API
  • 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

6. TextInput 完整属性

// 搜索框 - 圆角设计TextInput({placeholder:'搜索内容、模板、用户',text:this.searchKey}).fontSize(14).backgroundColor(Color.Transparent).layoutWeight(1).onChange((value:string)=>{this.searchKey=value})// 带搜索图标的搜索框Row({space:8}){Text('🔍').fontSize(16).fontColor('#999999')TextInput({placeholder:'搜索...',text:this.searchKey}).layoutWeight(1)}.width('100%').height(40).backgroundColor('#F5F5F5').borderRadius(20).padding({left:16,right:16})

7. TextArea 完整属性

// 文字编辑器 - 多行输入TextArea({text:'生活的美好在于分享...',placeholder:'输入你想分享的内容...'}).fontSize(15).fontColor('#333333').backgroundColor(Color.Transparent).width('100%').height(300).padding({left:16,right:16}).onChange((value:string)=>{this.textContent=value})

8. TextPicker 完整属性

// 字体大小选择器TextPicker({range:['12','14','16','18','20','24','28','32'],selected:this.selectedSize}).onChange((value:string,index:number)=>{this.selectedSize=index})

9. 表单组件对比

组件用途行数适用场景
TextInput单行输入1 行搜索框、用户名
TextArea多行输入多行文章编辑、评论
TextPicker选择器1 行选项选择

10. 小分享 App 中的使用

页面组件用途
DiscoverPageTextInput搜索框
TextEditPageTextArea文字编辑
LinkEditPageTextInput链接输入
SettingsPageTextPicker选项选择

11. 完整代码文件索引

文件路径说明
多个页面文件使用表单组件

12. 本文涉及的所有 API

API/组件用途文档链接
TextInput单行输入TextInput
TextArea多行输入TextArea
TextPicker选择器TextPicker
InputType输入类型TextInput
EnterKeyType回车键类型TextInput

13. 实现要点总结

表单组件核心要点：

  1. TextInput：单行输入，支持 placeholder、onChange、maxLength
  2. TextArea：多行输入，支持固定高度、自动滚动
  3. TextPicker：选择器，支持 range 和 selected 绑定
  4. @State 绑定：onChange 回调中更新状态变量

14. 总结

本文详细讲解了 ArkUI 三大表单组件 TextInput、TextArea、TextPicker 的完整属性和用法。

相关资源

  • HarmonyOS TextInput 官方文档：TextInput Reference
  • HarmonyOS TextArea 组件：TextArea Reference
  • HarmonyOS TextPicker 组件：TextPicker Reference
  • HarmonyOS 表单开发：Form Development
  • HarmonyOS 输入组件：Input Components
  • HarmonyOS 选择器：Picker Components
  • HarmonyOS 状态管理：State Management
  • 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

  • 状态管理进阶

  • ArkUI 基础组件详解

  • 状态管理进阶

  • ArkUI 基础组件详解

15. 完整代码文件索引

文件路径说明
pages/DiscoverPage.ets搜索框 TextInput
pages/TextEditPage.ets文字编辑 TextArea
pages/LinkEditPage.ets链接输入 TextInput
pages/SettingsPage.ets选项选择 TextPicker

16. 本文涉及的所有 API

API/组件用途文档链接
TextInput单行输入TextInput
TextArea多行输入TextArea
TextPicker选择器TextPicker
@State状态绑定State
onChange变化回调各组件文档

17. 实现要点总结

表单组件核心要点：

  1. TextInput：单行输入，支持 placeholder、onChange、maxLength、enterKeyType
  2. TextArea：多行输入，支持固定高度、自动滚动、placeholder
  3. TextPicker：选择器，支持 range 数组和 selected 索引绑定
  4. @State 绑定：onChange 回调中更新状态变量，实现双向绑定

18. 总结

本文详细讲解了 ArkUI 三大表单组件 TextInput、TextArea、TextPicker 的完整属性和用法。

相关资源

  • HarmonyOS TextInput 官方文档：TextInput Reference
  • HarmonyOS TextArea 组件：TextArea Reference
  • HarmonyOS TextPicker 组件：TextPicker Reference
  • HarmonyOS 表单开发：Form Development
  • HarmonyOS 输入组件：Input Components
  • HarmonyOS 选择器：Picker Components
  • HarmonyOS 状态管理：State Management
  • 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/25 3:14:46

RAG技术实战：从原型到生产的优化策略

1. 项目概述：RAG技术从原型到生产的完整路径去年参与企业级知识问答系统升级时，我们团队用三个月时间将RAG（检索增强生成）模型的准确率从63%提升到89%。这个过程中积累的实战经验，正是今天想与各位开发者分享的核心内容…

作者头像 李华
网站建设 2026/7/25 3:12:32

从零部署Dify：掌握开源AI应用开发平台与工作流构建实战

Dify 是一个开源的 AI 应用开发平台，它让开发者能够通过可视化的工作流编排，快速构建和部署基于大语言模型的智能应用。对于想要涉足 AI 应用开发，但又不想陷入复杂底层代码和基础设施搭建的开发者或团队来说，Dify 提供了一个从创意到上线的完整解决方案。它集成了 RAG、Ag…

作者头像 李华
网站建设 2026/7/25 3:12:15

Windows系统盘空间优化：SpaceMover一键迁移工具详解

1. 工具定位与核心价值作为一名常年与Windows系统打交道的运维工程师，我深知系统盘空间告急的痛楚。当C盘亮起红色预警时，传统的手动文件迁移不仅耗时费力，还存在误删系统文件的风险。这款名为"SpaceMover"的一键迁移工具&#xff…

作者头像 李华
网站建设 2026/7/25 3:11:29

OpenHarmony 网格、列表进阶与懒加载实战开发

承接前两篇 ArkUI 组件内容，本文聚焦Grid 网格布局、List 列表高阶用法、组件懒加载、瀑布流等高频实用能力，结合完整案例讲解特性、适配方案与性能优化，适合页面布局进阶开发。一、概述在应用开发中，图文宫格、商品陈列、相册、分…

作者头像 李华
网站建设 2026/7/25 3:10:15

3分钟快速搞定Android Studio中文界面：终极免费汉化指南

3分钟快速搞定Android Studio中文界面：终极免费汉化指南 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本） 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack Android Stud…

作者头像 李华
网站建设 2026/7/25 3:05:46

C++模板进阶：模板特化与分离编译实战指南

1. 项目概述：从“能用”到“精通”的模板进阶之路搞C的朋友，尤其是写过一些通用库或者框架的，对模板这玩意儿是又爱又恨。爱的是它带来的强大泛型能力和编译期计算的可能性，恨的是它那令人头疼的编译错误和链接时的一头雾水。当你…

作者头像 李华