TextInput 与 TextArea：日记标题与正文的输入体验优化
前言在日记应用中输入体验直接影响用户的写作意愿。“海风日记“的写日记页面使用了TextInput和TextArea两个输入组件分别用于标题和正文的输入并配合渐变背景、波浪分隔和字数统计等元素打造了沉浸式的写作体验。本文将从WriteDiaryPage.ets源码出发深入讲解 TextInput 和 TextArea 的配置、样式优化以及最佳实践。一、TextInput 标题输入1.1 基本配置TextInput({ placeholder: 给今天起个标题…, text: this.title }) .width(100%).height(44) .fontSize(16).fontWeight(FontWeight.Medium) .placeholderColor(rgba(255,255,255,0.60)) .fontColor(#FFFFFF) .backgroundColor(rgba(255,255,255,0.18)) .borderRadius(10) .border({ width: 1, color: rgba(255,255,255,0.25) }) .padding({ left: 14, right: 14 }) .onChange((v) { this.title v })1.2 属性说明属性值说明placeholder“给今天起个标题…”占位提示文字fontSize16输入字号fontWeightMedium中等字重placeholderColorrgba(255,255,255,0.60)占位文字颜色fontColor#FFFFFF输入文字颜色backgroundColorrgba(255,255,255,0.18)半透明白色背景borderRadius10圆角border1px 白色半透明边框二、TextArea 正文输入2.1 基本配置TextArea({ placeholder: 让文字随海风飘散…\n\n今天发生了什么此刻心情如何, text: this.diaryText }) .width(100%) .constraintSize({ minHeight: 300 }) .fontSize(16) .fontColor(COLOR_TEXT_MAIN) .lineHeight(32) .placeholderColor(COLOR_TEXT_HINT) .backgroundColor(transparent) .borderRadius(0) .border({ width: 0 }) .padding({ left: PAGE_PADDING, right: PAGE_PADDING, top: 16, bottom: 16 }) .onChange((v) { this.diaryText v })2.2 属性说明属性值说明placeholder多行提示换行符分隔的占位文字constraintSize.minHeight300最小高度fontSize16正文字号lineHeight32行高提升可读性backgroundColortransparent透明背景三、字数统计Text(${this.diaryText.length} 字) .fontSize(11).fontColor(COLOR_TEXT_HINT) .alignSelf(ItemAlign.End) .padding({ right: PAGE_PADDING, bottom: 8 })四、输入框的视觉优化4.1 渐变背景区域Column({ space: 16 }) { TextInput({...}) // 标题输入 MoodSelector({...}) // 心情选择 } .linearGradient({ angle: 160, colors: [ [COLOR_HEADER_TOP, 0.0], [#FFE0B0, 0.6], [COLOR_HEADER_BOTTOM, 1.0], ] })4.2 波浪分隔Shape() { Path() .commands(M 0 0 C 80 12 160 -4 240 6 C 320 16 360 0 390 4 L 390 20 L 0 20 Z) .fill(#FFD4A0).stroke(none) } .width(100%).height(20).margin({ top: -1 })五、常见问题与排查5.1 TextInput 高度无法调整问题TextInput 高度固定无法通过height属性调整。解决方案使用height属性直接设置高度。5.2 TextArea 占位文字不换行问题TextArea 的占位文字中的\n不生效。原因占位文字默认不支持换行。解决方案使用\n换行符TextArea 支持换行。总结本文通过“海风日记“写日记页面的输入组件深入讲解了 TextInput 和 TextArea 的用法TextInput 标题占位文字、颜色、圆角配置TextArea 正文最小高度、行高、透明背景字数统计实时显示输入字数视觉优化渐变背景和波浪分隔下一篇文章将深入讲解底部工具栏设计敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源TextInput 组件文档TextArea 组件文档Scroll 组件文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
