《伴时匣》app开发技术分享--表单提交页（5）
## 技术栈
Appgallery connect
## 开发准备
上一节我们已经实现了表单信息的创建，完成了首页跳转表单提交页的内容，这一节我们就要实现表单创建前的数据填充的页面。
## 功能分析
在表单提交前，我们要实现的静态内容有很多，分别有输入框，开关，时间选择器，表类型，是否置顶，是否设置结束时间，是否包含当天日期，事件的颜色选择，图标选择，当天的天气选择，心情选择，这些我们都需要去先有一个静态选择或者展示的入口
## 功能开发
我们先实现简单的静态页
```c
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%')
}
}
```
接下来我们实现一个日期选择的弹窗
```c
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());
}
});
})
```
这样我们就实现了表单提交页和日期的选择器
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70046889/viewspace-3089430/ ，如需转载，请注明出处，否则将追究法律责任。
