HarmonyOS：分区列表的详细使用方法

前言：我们的App中有一个页面是分区的，每个分区有不同的item，下面给大家介绍一下带分区的list实现方法，以及区头，区尾的实现方法。

先简单介绍一下鸿蒙系统提供的组件：

List组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5

ListItemGroup组件(主要是实现区头区尾的组件)：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-listitemgroup-V5

ListItem组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-listitem-V5

List() {
        ForEach(this.dataList, (item: AppSectionModel,index:number) => {
          ListItemGroup() {
            ForEach(item.sectionItemList, (subItem: AppSetModel) => {
              ListItem() {
                
                })
              }
            }, (subItem: AppSetModel) => JSON.stringify(subItem))
          }
        })
      }

这样的一个层次结果就能实现分区列表的要求。
实现效果如图：

代码：

@Entry
@HMRouter({ pageUrl: 'AboutPage', lifecycle: 'PageDurationLifecycle', animator: 'pageAnimator' })
@Component
export struct  AboutPage{
  @State   dataList:AppSectionModel[] = [];
  aboutToAppear(): void {
    this.dataList = aboutVM.getDataList()
  }
  aboutToDisappear() {
  }
  @Builder
  itemHead() {
    GroupHeader()
  }
  @Builder
  itemFoot(last: boolean) {
    if (last){
      GroupFooter()
    }else {
      LineFooter()
    }
  }
  build() {
    Column() {
      Column(){
        WinNavigationBar({
          title: '关于',
          backTitle:'',
          onKeyBack: () => {
            HMRouterMgr.pop()
          },
        })
      }
      List() {
        ForEach(this.dataList, (item: AppSectionModel,index:number) => {
          ListItemGroup({ header: index==0?this.itemHead():undefined, footer: this.itemFoot(index==this.dataList.length-1?true:false) }) {
            ForEach(item.sectionItemList, (subItem: AppSetModel) => {
              ListItem() {
                WinCellGroupItem({
                  contentItemOptions:({
                    itemType:subItem.itemType,
                    icon:$r(`app.media.${subItem.iconName}`),
                    primaryTitle:subItem.title,
                    enddaryIcon:($r('app.media.ic_arrow')),
                    endContent:subItem.endContent,
                    switchValue:!PreferencesManager.get(CommonConstants.CHAT_SWITCH_VALUE) as boolean,
                    onSwitchClick:((value:boolean)=>{
                      WinLog.info('开关咨询按钮' + value)
                      PreferencesManager.set(CommonConstants.CHAT_SWITCH_VALUE, !value)
                    }),
                    onClick:()=>{
                      if (subItem.pushNextPageName&&subItem.pushNextPageName?.length > 0){
                        HMRouterMgrTool.push(subItem.pushNextPageName,undefined);
                      }
                    }
                  })
                })
                  .backgroundColor(Color.White)
              }
            }, (subItem: AppSetModel) => JSON.stringify(subItem))
          }
          .divider(egDivider)
        })
      }
      .width(StyleConstants.FULL_PARENT)
      .scrollBar(BarState.Off)
      .layoutWeight(1)
    }
  }
}
@Component
struct GroupHeader{
  build() {
    Column(){
      Image($r('app.media.ic_app_about'))
        .width(StyleConstants.FULL_PARENT)
        .height(100)
        .objectFit(ImageFit.Contain)
      Line()
        .height(0.5)
        .width(StyleConstants.FULL_PARENT)
        .backgroundColor('#e1e1e1')
    }
    .backgroundColor(Color.White)
  }
}
@Component
struct  LineFooter{
  build() {
    Line()
      .height(StyleConstants.LINE_HEIGHT)
      .width(StyleConstants.FULL_PARENT)
      .backgroundColor($r('app.color.divider_color'))
  }
}
@Component
struct GroupFooter{
  /**
   * Log out
   */
  logout() {
    LoginApi.normalLogout()
    Logger.info(CommonConstants.TAG_MINE_PAGE, 'Logout');
    // NavPathStackUtil.popHome()
    // HMRouterMgr.replace()
  }

  build() {
    Column({space:10}){
      Text($r('app.string.login_out_title'))
        .fontSize(StyleConstants.CONTENT_FONT)
        .fontColor(Color.White)
        .backgroundColor('#CD5C5C')
        .textAlign(TextAlign.Center)
        .borderRadius(5)
        .width(StyleConstants.LOGIN_OUT_BUTTON_WIDTH)
        .height(StyleConstants.LOGIN_OUT_BUTTON_HEIGHT)
        .onClick(()=>{
          this.logout()
        })
      Text($r('app.string.copyright'))
        .newExtend()
        .onClick(()=>{
        })
      Text($r('app.string.icp_value'))
        .newExtend()
        .onClick(()=>{
          WinLog.info('查看备案号');
        })
    }
    .padding({top:40})
    .backgroundColor($r('app.color.divider_color'))
    .width(StyleConstants.FULL_PARENT)
  }
}
@Extend(Text)
function newExtend() {
  .fontSize(12)
  .fontColor('#b2b2b2')
  .textAlign(TextAlign.Center)
  .width(StyleConstants.FULL_PARENT)
}

我们的是只有第一个区有区头，和最后一个区有区尾，所以我设置的有判断，如果你们的分区都有区头和区尾，就不需要设置。
WinCellGroupItem是我自定义的一个item组件你们可以用text代替，列表的数据结构如下：

export interface  AppSectionModel{
  sectionItemList: AppSetModel[];
  sectionTitle?: string ;
}
export class AppSetModel{
  iconName:string = '';
  title:string = '';
  endIconName?:string = '';
  endContent?:string = '';
  itemType?:CellItemType = CellItemType.NORMAL_CELL
  pushNextPageName?:string;
  constructor(iconName:string,title:string,endIconName?:string,endContent?:string,itemType?:CellItemType,pushNextPageName?:string) {
    this.iconName = iconName;
    this.title = title;
    this.endIconName = endIconName;
    this.endContent = endContent;
    this.itemType = itemType;
    this.pushNextPageName = pushNextPageName;
  }
}
export class AboutViewModel {
  private dataList: AppSectionModel[] =  [
    {
      sectionItemList:[
      new AppSetModel('ic_bbxx_one','版本信息','','xxxx',CellItemType.CONTENT_CELL),
      new AppSetModel('ic_sdsc','手动上传','','',CellItemType.ARROW_CELL,'ManuaUpLoadPage')
      ]
    },
    {
      sectionItemList:[
        new AppSetModel('ic_zdcs_one','诊断测试','','',CellItemType.ARROW_CELL,'DiagnosticLogPage'),
        new AppSetModel('ic_qlsj_one','清理数据','','',CellItemType.ARROW_CELL),
        new AppSetModel('ic_xgmm_one','修改密码','','',CellItemType.ARROW_CELL),
        new AppSetModel('ic_gywm_one','关于我们','','',CellItemType.ARROW_CELL)
      ]
    },
    {
      sectionItemList:[
        new AppSetModel('ic_zxzx_one','xxxx','','',CellItemType.TOGGLE_CELL),
        new AppSetModel('ic_about_hotline','xxxx','','xxx',CellItemType.CONTENT_LINE_CELL)
      ]
    },
  ];

  getDataList(){
    return this.dataList;
  }
}

这两个页面的代码整合一下就能看到效果了。
如果你们的页面是区头固定，那你们设置 .scrollBar(BarState.Off)，你们可以修改这个枚举，看看他的效果
.sticky(StickyStyle.Header | StickyStyle.Footer)