健康应用2

主页面和项目列表页面

• 组件属性：
  • currentIndex：当前选中的标签索引。
  • breakpointSystem：断点系统实例，用于响应不同屏幕尺寸。
  • currentBreakpoint：当前的断点类型。
  • isPageShow：页面显示状态。
• 生命周期函数：
  • onPageShow和onPageHide：页面显示和隐藏时调用。
  • aboutToAppear和aboutToDisappear：页面即将出现和消失时注册和注销断点系统。
• TabBarBuilder：用于构建标签栏的组件。
• selectColor：根据当前选中的标签索引选择颜色。
• 构建UI：
  • 使用Tabs组件创建标签页。
  • TabContent定义了每个标签页的内容。
  • TabBarBuilder用于自定义每个标签的显示。
  • 标签包括记录、发现和用户主页。

文件2：ItemIndex.txt 这个文件定义了一个名为ItemIndex的组件，用于展示一个项目列表和相关的操作面板。以下是其核心内容：

• 组件扩展：
  • panelButtonStyle：用于设置按钮样式的方法。
• 组件属性：
  • amount：数量。
  • value：值。
  • showPanel：是否显示面板。
• 方法：
  • onPanelShow：显示面板时调用，重置amount和value。
• 构建UI：
  • 使用Column组件构建主布局。
  • Header：头部导航，包括返回按钮和标题。
  • ItemList：食物列表，点击时会触发onPanelShow。
  • Panel：底部操作面板，包括日期、记录项卡片、数字键盘和按钮。
  • 面板中的按钮用于取消和提交操作。

这两个文件共同构成了一个应用程序的两个页面，Index.txt是主页面，提供了标签页导航，而ItemIndex.txt是一个项目列表页面，允许用户选择和记录项目。

import BreakpointType from '../common/bean/BreanpointType'
import BreakpointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RecordIndex from '../view/record/RecordIndex'

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private breakpointSystem: BreakpointSystem = new BreakpointSystem()
  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM

  @State isPageShow: boolean = false

  onPageShow(){
    this.isPageShow = true
  }
  onPageHide(){
    this.isPageShow = false
  }

  @Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) {
    Column({ space: CommonConstants.SPACE_8 }) {
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }

  aboutToAppear(){
    this.breakpointSystem.register()
  }

  aboutToDisappear(){
    this.breakpointSystem.unregister()
  }

  selectColor(index: number) {
    return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')
  }

  build() {
    Tabs({ barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint) }) {
      TabContent() {
        RecordIndex({isPageShow: this.isPageShow})
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'), $r('app.media.ic_calendar'), 0))

      TabContent() {
        Text('发现页面')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_discover'), $r('app.media.discover'), 1))

      TabContent() {
        Text('我的主页')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_user'), $r('app.media.ic_user_portrait'), 2))

    }
    .width('100%')
    .height('100%')
    .onChange(index => this.currentIndex = index)
    .vertical(new BreakpointType({
      sm: false,
      md: true,
      lg: true
    }).getValue(this.currentBreakpoint))
  }
}

import router from '@ohos.router'
import { CommonConstants } from '../common/constants/CommonConstants'
import { RecordTypeEnum, RecordTypes } from '../model/RecordTypeModel'
import RecordService from '../service/RecordService'
import ItemCard from '../view/item/ItemCard'
import ItemList from '../view/item/ItemList'
import ItemPanelHeader from '../view/item/ItemPanelHeader'
import NumberKeyboard from '../view/item/NumberKeyboard'
import RecordItem from '../viewmodel/RecordItem'
import RecordType from '../viewmodel/RecordType'

@Extend(Button) function panelButtonStyle(){
  .width(120)
  .type(ButtonType.Normal)
  .borderRadius(6)
}

@Entry
@Component
struct ItemIndex {
  @State amount:number=1
  @State value:string=''
  @State showPanel:boolean=false
  onPanelShow(){
    this.amount=1
    this.value=''
    this.showPanel=true
  }
  build(){
    Column(){
      //1.头部导航
      this.Header()
      //2、食物列表view-item-ItemList
      ItemList({showPanel:this.onPanelShow.bind(this)})
     .layoutWeight(1)
      //3.底部面板
      Panel(this.showPanel){

        //3.1顶部日期
        ItemPanelHeader()
        //3.2记录项卡片
        ItemCard({amount:this.amount})
        //3.3数字键盘
        NumberKeyboard({amount:$amount,value:$value})
        //3.4按钮
        Row({space:CommonConstants.SPACE_6}){  Button('取消')
          .width(120)
          .backgroundColor($r('app.color.light_gray'))
          .type(ButtonType.Normal)
          .borderRadius(6)
          .onClick(()=>this.showPanel=false)
          Button('提交')
            .width(120)
            .backgroundColor($r('app.color.primary_color'))
            .type(ButtonType.Normal)
            .borderRadius(6)
            .onClick(()=>this.showPanel=false)
        }
      .margin({top:10})
      }
      .mode(PanelMode.Full)
      .dragBar(false)
      .backgroundMask($r('app.color.light_gray'))
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }
  @Builder Header(){
    Row(){
      Image($r('app.media.ic_public_back'))
        .width(30)
        .onClick(()=>router.back())
      Blank()
      Text('早餐').fontWeight(18).fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height(32)
  }


}