《伴时匣》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());
          }
         
        });
      })
```
这样我们就实现了表单提交页和日期的选择器