## 技术栈
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());
}
});
})
这样我们就实现了表单提交页和日期的选择器
