HarmonyOS-记账本-记账列表

今天完成记账列表的基本实现

import { CommonConstants } from '../../common/constants/CommonConstants'
import getIn from './getIn'
@Component
export default struct RecordList {
  controller:CustomDialogController = new CustomDialogController({
    builder:getIn()
  })
  @State showPanle: boolean = false
  //收入列表


  build() {
Column({space:CommonConstants.SPACE_10}){
    Column({space:CommonConstants.SPACE_8}) {
      Row({ space: CommonConstants.SPACE_4 }) {
        Image($r('app.media.ic_Record')).width(24)
        Text('收入').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700).fontColor('#ffcc99')
        Blank()
        Image($r('app.media.ic_public_add_norm_filled'))
          .width(20)
          .fillColor('#FF6600')
          .onClick(()=>this.controller.open())

      }
      .width('100%')

      List({space:CommonConstants.SPACE_12}){
        ForEach([1,2],item=>{
          ListItem(){
            Row({ space: CommonConstants.SPACE_4 }) {
              Image($r('app.media.ic_Record')).width(24)
              Text('收入').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700).fontColor('#ffcc99')
              Blank()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor('#FF6600')

            }
            .width('100%')
          }
          .swipeAction({end:this.deleteButton.bind(this)})
          .width('100%')
        })
      }
      .width('100%')




    }
    .width('100%')
    .backgroundColor(Color.White)
    .borderRadius(CommonConstants.DEFAULT_18)
    .padding(CommonConstants.SPACE_12)



    Column() {
      Row({ space: CommonConstants.SPACE_4 }) {
        Image($r('app.media.ic_Record')).width(24)
        Text('支出').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700).fontColor('#ffcc99')
        Blank()
        Image($r('app.media.ic_public_add_norm_filled'))
          .width(20)
          .fillColor('#FF6600')
      }
      .width('100%')

    }
    .width('100%')
    .backgroundColor(Color.White)
    .borderRadius(CommonConstants.DEFAULT_18)
    .padding(CommonConstants.SPACE_12)



  }
    .width('100%')
    .backgroundColor($r('app.color.index_page_background'))
}

  @Builder deleteButton(){
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }


}