《伴时匣》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());

}

});

})

```

这样我们就实现了表单提交页和日期的选择器