《伴时匣》app开发技术分享--表单提交准备(4)

举报
yd_215151764 发表于 2025/06/30 13:09:48 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了用户登录功能,现在我们进入首页,可以开始准备着手发布我们的日期计划了,在这之前我们先实现信息表的创建。在首页实现一个标题栏,一个悬浮的按钮。## 功能分析我们的信息表要展示的内容很多,首先是我们的事件名称,目标日期选择,公历农历,正数倒数,倒数类目的选择,是否实现置顶效果,是否显示精确时间,事件颜色,事件图标,事件...


## 技术栈

Appgallery connect

## 开发准备
上一节我们实现了用户登录功能,现在我们进入首页,可以开始准备着手发布我们的日期计划了,在这之前我们先实现信息表的创建。在首页实现一个标题栏,一个悬浮的按钮。

## 功能分析
我们的信息表要展示的内容很多,首先是我们的事件名称,目标日期选择,公历农历,正数倒数,倒数类目的选择,是否实现置顶效果,是否显示精确时间,事件颜色,事件图标,事件心情,事件天气,跟用户绑定,跟绑定的关系用户绑定等。

## 功能开发
我们先实现对应的表的创建
```c
{
  "objectTypeName": "push_table_day",
  "fields": [
    {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
    {"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},
    {"fieldName": "title", "fieldType": "String"},
    {"fieldName": "day", "fieldType": "String"},
    {"fieldName": "time_type", "fieldType": "Integer"},
    {"fieldName": "menu_id", "fieldType": "Integer"},
    {"fieldName": "is_show_top", "fieldType": "Boolean"},
    {"fieldName": "is_show_time", "fieldType": "Boolean"},
    {"fieldName": "tab_color_id", "fieldType": "Integer"},
    {"fieldName": "tab_icon_id", "fieldType": "Integer"},
    {"fieldName": "tab_mood_id", "fieldType": "Integer"},
    {"fieldName": "tab_weather_id", "fieldType": "Integer"},
    {"fieldName": "bind_user_id", "fieldType": "Integer"},
    {"fieldName": "bind_type", "fieldType": "Integer"},
    {"fieldName": "table_message_id", "fieldType": "Integer"}
    

  ],
  "indexes": [
    {"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
  ],
  "permissions": [
    {"role": "World", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
  ]
}
```
db类

```c
import { cloudDatabase } from '@kit.CloudFoundationKit';

class push_table_day extends cloudDatabase.DatabaseObject {
  public id: number;
  public user_id = 0;
  public title: string;
  public day: string;
  public time_type: number;
  public menu_id: number;
  public is_show_top: boolean;
  public is_show_time: boolean;
  public tab_color_id: number;
  public tab_icon_id: number;
  public tab_mood_id: number;
  public tab_weather_id: number;
  public bind_user_id: number;
  public bind_type: number;
  public table_message_id: number;

  public naturalbase_ClassName(): string {
    return 'push_table_day';
  }
}

export { push_table_day };
```
实体类

```c

class PushTableDay {
    id: number;
    user_id: number = 0;
    title: string;
    day: string;
    time_type: number;
    menu_id: number;
    is_show_top: boolean;
    is_show_time: boolean;
    tab_color_id: number;
    tab_icon_id: number;
    tab_mood_id: number;
    tab_weather_id: number;
    bind_user_id: number;
    bind_type: number;
    table_message_id: number;

    constructor() {
    }


    setId(id: number): void {
        this.id = id;
    }

    getId(): number  {
        return this.id;
    }

    setUser_id(user_id: number): void {
        this.user_id = user_id;
    }

    getUser_id(): number  {
        return this.user_id;
    }

    setTitle(title: string): void {
        this.title = title;
    }

    getTitle(): string  {
        return this.title;
    }

    setDay(day: string): void {
        this.day = day;
    }

    getDay(): string  {
        return this.day;
    }

    setTime_type(time_type: number): void {
        this.time_type = time_type;
    }

    getTime_type(): number  {
        return this.time_type;
    }

    setMenu_id(menu_id: number): void {
        this.menu_id = menu_id;
    }

    getMenu_id(): number  {
        return this.menu_id;
    }

    setIs_show_top(is_show_top: boolean): void {
        this.is_show_top = is_show_top;
    }

    getIs_show_top(): boolean  {
        return this.is_show_top;
    }

    setIs_show_time(is_show_time: boolean): void {
        this.is_show_time = is_show_time;
    }

    getIs_show_time(): boolean  {
        return this.is_show_time;
    }

    setTab_color_id(tab_color_id: number): void {
        this.tab_color_id = tab_color_id;
    }

    getTab_color_id(): number  {
        return this.tab_color_id;
    }

    setTab_icon_id(tab_icon_id: number): void {
        this.tab_icon_id = tab_icon_id;
    }

    getTab_icon_id(): number  {
        return this.tab_icon_id;
    }

    setTab_mood_id(tab_mood_id: number): void {
        this.tab_mood_id = tab_mood_id;
    }

    getTab_mood_id(): number  {
        return this.tab_mood_id;
    }

    setTab_weather_id(tab_weather_id: number): void {
        this.tab_weather_id = tab_weather_id;
    }

    getTab_weather_id(): number  {
        return this.tab_weather_id;
    }

    setBind_user_id(bind_user_id: number): void {
        this.bind_user_id = bind_user_id;
    }

    getBind_user_id(): number  {
        return this.bind_user_id;
    }

    setBind_type(bind_type: number): void {
        this.bind_type = bind_type;
    }

    getBind_type(): number  {
        return this.bind_type;
    }

    setTable_message_id(table_message_id: number): void {
        this.table_message_id = table_message_id;
    }

    getTable_message_id(): number  {
        return this.table_message_id;
    }

}

export { PushTableDay };
```
我们实现首页标题栏和悬浮添加按钮

```c
import { CommonTopBar } from './widget/CommonTopBar'

@Entry
@Component
struct Index {

  build() {
    Column(){
      CommonTopBar({ title: "主页", alpha: 0, titleAlignment: TextAlign.Center ,backButton:false})
      Stack({alignContent:Alignment.BottomEnd}){
        Column(){
          List(){

          }
        }
        .height('100')
        .width('100%')

        Text("+")
          .fontSize(38)
          .width(60)
          .textAlign(TextAlign.Center)
          .backgroundColor("#ff65c8ee")
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Black)
          .height(60)
          .borderRadius(30)
          .margin({bottom:80,right:40})

      }
      .height('100%')
      .width('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.White)

  }
}
```
这样我们就完成了表单的创建和标题栏悬浮按钮的实现

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。