HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--表单提交页（5）
HarmonyOS鸿蒙Next《伴时匣》app开发技术分享–表单提交页（5）
技术栈
Appgallery connect
开发准备
上一节我们已经实现了表单信息的创建，完成了首页跳转表单提交页的内容，这一节我们就要实现表单创建前的数据填充的页面。
功能分析
在表单提交前，我们要实现的静态内容有很多，分别有输入框，开关，时间选择器，表类型，是否置顶，是否设置结束时间，是否包含当天日期，事件的颜色选择，图标选择，当天的天气选择，心情选择，这些我们都需要去先有一个静态选择或者展示的入口
功能开发
我们先实现简单的静态页
import { CommonTopBar } from '../widget/CommonTopBar';
@Entry
@Component
struct TablePushPage {
@State title:string=''
@State time_visibility:boolean=false
@State top_visibility:boolean=false
build() {
Column({space:15}) {
CommonTopBar({ title: "添加新日子", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
Row({space:10}){
Image($r('app.media.mubiaoshijian'))
.height(30)
.width(30)
TextInput({text:this.title,
placeholder: '请输入事件名称'})
.placeholderColor("#ff999595")
.fontColor("#333333")
.onChange((value: string) => {
this.title=value
})
}
.width('100%')
.justifyContent(FlexAlign.Start)
Row({space:10}){
Image($r('app.media.mubiaori'))
.height(30)
.width(30)
Text("目标日")
.fontColor(Color.Gray)
.fontSize(14)
Blank()
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row({space:10}){
Image($r('app.media.daoshuben'))
.height(30)
.width(30)
Text("倒数本")
.fontColor(Color.Gray)
.fontSize(14)
Blank()
Text("生活")
.fontColor(Color.Gray)
.fontSize(14)
Image($r('app.media.xiajiantou'))
.height(15)
.width(15)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row({space:10}){
Image($r('app.media.zhiding'))
.height(30)
.width(30)
Text("置顶")
.fontColor(Color.Gray)
.fontSize(14)
Blank()
Image(this.top_visibility?$r('app.media.kai'):$r('app.media.guan'))
.width(60)
.height(30)
.onClick(async ()=>{
this.top_visibility=!this.top_visibility
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row({space:10}){
Image($r('app.media.jingqueshijian'))
.height(30)
.width(30)
Text("显示精确时间")
.fontColor(Color.Gray)
.fontSize(14)
Blank()
Image(this.time_visibility?$r('app.media.kai'):$r('app.media.guan'))
.width(60)
.height(30)
.onClick(async ()=>{
this.time_visibility=!this.time_visibility
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row({space:10}){
Image($r('app.media.yanse'))
.height(30)
.width(30)
Text("事件颜色")
.fontColor(Color.Gray)
.fontSize(14)
Blank()
Image($r('app.media.xiajiantou'))
.height(15)
.width(15)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row({space:10}){
Image($r('app.media.tubiao'))
.height(30)
.width(30)
Text("事件图标")
.fontColor(Color.Gray)
.fontSize(14)
Blank()
Image($r('app.media.xiajiantou'))
.height(15)
.width(15)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row({space:10}){
Image($r('app.media.tianqi'))
.height(30)
.width(30)
Text("天气")
.fontColor(Color.Gray)
.fontSize(14)
Blank()
Image($r('app.media.xiajiantou'))
.height(15)
.width(15)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row({space:10}){
Image($r('app.media.xinqing'))
.height(30)
.width(30)
Text("心情")
.fontColor(Color.Gray)
.fontSize(14)
Blank()
Image($r('app.media.xiajiantou'))
.height(15)
.width(15)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.padding(10)
.backgroundColor(Color.White)
.height('100%')
.width('100%')
}
}
接下来我们实现一个日期选择的弹窗
Row({space:10}){
Image($r('app.media.mubiaori'))
.height(30)
.width(30)
Text("目标日")
.fontColor(Color.Gray)
.fontSize(14)
Blank()
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.onClick(()=>{
this.getUIContext().showDatePickerDialog({
start: new Date("2000-1-1"),
end: new Date("2100-12-31"),
selected: this.selectedDate,
disappearTextStyle: { color: '#297bec', font: { size: '20fp', weight: FontWeight.Bold } },
textStyle: { color: Color.Black, font: { size: '18fp', weight: FontWeight.Normal } },
selectedTextStyle: { color: Color.Blue, font: { size: '26fp', weight: FontWeight.Regular } },
acceptButtonStyle: {
type: ButtonType.Normal,
style: ButtonStyleMode.NORMAL,
role: ButtonRole.NORMAL,
fontColor: 'rgb(81, 81, 216)',
fontSize: '26fp',
fontWeight: FontWeight.Bolder,
fontStyle: FontStyle.Normal,
fontFamily: 'sans-serif',
backgroundColor: '#A6ACAF',
borderRadius: 20
},
cancelButtonStyle: {
type: ButtonType.Normal,
style: ButtonStyleMode.NORMAL,
role: ButtonRole.NORMAL,
fontColor: Color.Blue,
fontSize: '16fp',
fontWeight: FontWeight.Normal,
fontStyle: FontStyle.Italic,
fontFamily: 'sans-serif',
backgroundColor: '#50182431',
borderRadius: 10
},
onDateAccept: (value: Date) => {
this.selectedDate = value;
console.info("时间" + value.toString());
}
});
})
这样我们就实现了表单提交页和日期的选择器
更多关于HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--表单提交页（5）的实战教程也可以访问 https://www.itying.com/category-93-b0.html
鸿蒙Next开发表单提交页可使用ArkUI框架实现。主要使用@Component装饰器和@Entry装饰器构建页面结构。表单控件推荐使用TextInput、TextArea、Picker等组件。数据绑定通过@State和@Link装饰器管理状态。表单验证可使用自定义校验函数，结合if条件渲染错误提示。提交逻辑通过http模块发起网络请求，建议使用Promise处理异步操作。页面布局采用Column、Row等容器组件配合Flex布局。
更多关于HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--表单提交页（5）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
从代码实现来看，这是一个典型的HarmonyOS表单页面开发案例，使用了ArkUI的声明式开发范式。几个关键点值得注意：
-
状态管理使用@State装饰器实现了标题和开关状态的响应式更新，这是HarmonyOS开发的核心特性之一。
-
页面布局采用Column+Row的嵌套组合，配合Flex布局属性，构建了清晰的表单结构。
-
日期选择器通过showDatePickerDialog API实现，展示了HarmonyOS系统弹窗的强大定制能力，包括：
-
日期范围设置
-
丰富的样式定制（文字、按钮样式等）
-
回调事件处理
-
-
资源引用使用$r(‘app.media.xxx’)方式，符合HarmonyOS资源管理规范。
建议后续可以补充：
-
表单验证逻辑
-
数据持久化存储
-
更复杂的自定义组件（如颜色选择器）
当前实现已经完成了基础表单框架，为后续功能开发打下了良好基础。
