鸿蒙软件开发实战案例（四）

董恩威

已于 2024-06-26 14:30:45 修改

阅读量399

点赞数 14

文章标签： harmonyos 华为

于 2024-06-26 14:09:46 首次发布

本文链接：https://blog.csdn.net/ycxdd/article/details/139987447

版权

本系列为黑马程序员HarmonyOS4+NEXT实战案例跟做记录，目录：

通过首页面的加号调出列表页面，且通过不同位置的点击显示不同信息的列表

整体效果展示（.gif）：

因为并未完全制作完成所以引入列表是俩长一样的项

跳转路由并传参确保展开为想要的列表项（具体表现为点第一个加号进入饮食第二个加号进入运动）：

仅展示部分代码

首页部分：

List({space:CommonConstants.SPACE_10}){
    ListItem(){
    Column(){
      Column(){
        //标题
        Row({space:CommonConstants.SPACE_4}){
          Image($r('app.media.ic_breakfast')).width(24)
          Text('早餐') .fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
          Text('建议423-592千卡').graytext()
          Blank()//区域留白
          Text('191').fontSize(14).fontColor($r('app.color.primary_color'))
          Text('千卡').graytext()
          Image($r('app.media.ic_public_add_norm_filled'))
            .width(20)
            .fillColor($r('app.color.primary_color'))//为图片填充颜色
        }
        .width('100%')
        .onClick(()=>{
          router.pushUrl({
            url:'pages/itemindex',
            params:{aa:1}
          })
        })
        //组内记录表
        List(){
          ForEach([1,2],(item)=>{
            ListItem(){
              Row({space:CommonConstants.SPACE_6}){
                Image($r('app.media.toast')).width(50)
                Column({space:CommonConstants.SPACE_4}){
                  Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                  Text('1片').graytext()
                }
                Blank()
                Text('91千卡').graytext()
              }
              .width('100%')
              .padding(CommonConstants.SPACE_6)
            }
            .swipeAction({end:this.deletebutten.bind(this)})
          })
        }
        .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_breakfast')).width(24)
          Text('早餐') .fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
          Text('建议423-592千卡').graytext()
          Blank()//区域留白
          Text('191').fontSize(14).fontColor($r('app.color.primary_color'))
          Text('千卡').graytext()
          Image($r('app.media.ic_public_add_norm_filled'))
            .width(20)
            .fillColor($r('app.color.primary_color'))//为图片填充颜色
        }
        .width('100%')
        .onClick(()=>{
          router.pushUrl({
            url:'pages/itemindex',
            params:{aa:0}
          })
        })
        //组内记录表
        List(){
          ForEach([1,2],(item)=>{
            ListItem(){
              Row({space:CommonConstants.SPACE_6}){
                Image($r('app.media.toast')).width(50)
                Column({space:CommonConstants.SPACE_4}){
                  Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                  Text('1片').graytext()
                }
                Blank()
                Text('91千卡').graytext()
              }
              .width('100%')
              .padding(CommonConstants.SPACE_6)
            }
            .swipeAction({end:this.deletebutten.bind(this)})
          })
        }
        .width('100%')
      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)
      .padding(CommonConstants.SPACE_12)
    }
    }
}
.margin({top:CommonConstants.SPACE_10})
.height('100%')
.width(CommonConstants.THOUSANDTH_940)

itemindex部分：

@State isFood:boolean=true

showfoots(){
  let cc:any=router.getParams()
  if(cc.aa===0){
    return this.isFood=false
  }
  else {
    return this.isFood=true
  }
}

and:

ItemList({showPanel: this.onPanelShow.bind(this),isFood:this.showfoots()})
  .layoutWeight(1)

itemModel部分：

class ItemModel{
  list(isFood:boolean):RecordItem[]{//返回为RecordItem
    if(isFood===true){
      return foods
    }
    else{
      return workouts
    }
  }
  listItemGroupByCategory(isFood:boolean){
    //判断食物还是运动
    let categories=isFood?FoodCategories:WorkoutCategories
    let items=isFood?foods:workouts
    //创建空分组
    let groups = categories.map(itemCategory=> new GroupInfo(itemCategory,[]))//map作用为遍历前面数组中的每一个元素将其变为另一个数组的元素，此处为将itemCategory转为GroupInfo
    //遍历食物列表，将食物添加到对应分组
    items.forEach(item=>groups[item.categoryId].items.push(item))
    return groups
  }
}

部分补充：因为router.pushUrl无法传递布尔值类型的参数（或许能传，我试的是传参后输出日志会直接报出不认识的字样），所以经过多次尝试选择了逃避式的解决方案将传参类型改为number类型，通过判断其是否符合条件在复制给布尔型变量已达到逃避传递布尔型参数无效的问题。

列表页部分：


import { CommonConstants } from '../../common/constants/CommonConstants'
import ItemModel from '../../model/ItemModel'
import GroupInfo from '../../viewmodel/Groupinfo'
import RecordItem from '../../viewmodel/Recordltem'

//条目列表存放itemindex相关组件
@Component
export default struct ItemList {
  showPanel:(item:RecordItem)=> void
  @Prop isFood: boolean

  build() {
    Tabs() {
      TabContent() {
        this.tabcountbuilder(ItemModel.list(this.isFood))
      }
      .tabBar('全部')
      ForEach(ItemModel.listItemGroupByCategory(this.isFood), (group: GroupInfo) => {
          TabContent() {
            this.tabcountbuilder(group.items)
          }
          .tabBar(group.type.name)
        })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
    .barMode(BarMode.Scrollable)
  }

  @Builder tabcountbuilder(items:RecordItem[]){
    List({space:CommonConstants.SPACE_10}){
      ForEach(items,(item:RecordItem)=>{
        ListItem(){
          Row({space:CommonConstants.SPACE_6}){
            Image(item.image).width(50)
            Column({space:CommonConstants.SPACE_4}){
              Text(item.name).fontWeight(CommonConstants.FONT_WEIGHT_500)
              Text(`${item.calorie}千卡/${item.unit}`)
                .fontSize(14)
                .fontColor($r('app.color.light_gray'))
            }
            .justifyContent(FlexAlign.Center)
              Blank()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(18)
              .fillColor($r('app.color.primary_color'))//为图片填充颜色
          }
          .width('100%')
          .padding(CommonConstants.SPACE_6)
        }
        .onClick(()=>this.showPanel(item))
        .width('100%')
      })
    }
    .width('100%')
    .height('100%')
  }
}