当前位置：首页 > news >正文

《伴时匣》app开发技术分享--表单提交页（5）

news 来源：原创 2025/6/30 17:35:29

技术栈

Appgallery connect

开发准备

上一节我们已经实现了表单信息的创建，完成了首页跳转表单提交页的内容，这一节我们就要实现表单创建前的数据填充的页面。

功能分析

在表单提交前，我们要实现的静态内容有很多，分别有输入框，开关，时间选择器，表类型，是否置顶，是否设置结束时间，是否包含当天日期，事件的颜色选择，图标选择，当天的天气选择，心情选择，这些我们都需要去先有一个静态选择或者展示的入口

功能开发

我们先实现简单的静态页

import { CommonTopBar } from '../widget/CommonTopBar';@Entry
@Component
struct TablePushPage {@State title:string=''@State time_visibility:boolean=false@State top_visibility:boolean=falsebuild() {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());}});})