1 卡片介紹

使用ArkTS語(yǔ)言，實(shí)現(xiàn)一個(gè)導(dǎo)航與內(nèi)容二級(jí)聯(lián)動(dòng)的效果。

2 標(biāo)題

二級(jí)聯(lián)動(dòng)（ArkTS）

3 介紹

介紹了如何基于List組件實(shí)現(xiàn)一個(gè)導(dǎo)航和內(nèi)容的二級(jí)聯(lián)動(dòng)效果。樣例主要包含以下功能：

1. 切換左側(cè)導(dǎo)航，右側(cè)滾動(dòng)到對(duì)應(yīng)的內(nèi)容。
2. 滾動(dòng)右側(cè)的內(nèi)容，左側(cè)會(huì)切換對(duì)應(yīng)的導(dǎo)航。

效果如圖所示：

相關(guān)概念

• [List]：列表包含一系列相同寬度的列表項(xiàng)。適合連續(xù)、多行呈現(xiàn)同類數(shù)據(jù)，例如圖片和文本。
• [ListItemGroup]：該組件用來展示列表item分組，寬度默認(rèn)充滿List組件，必須配合List組件來使用。

4 環(huán)境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發(fā)板類型：[潤(rùn)和RK3568開發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發(fā)板的燒錄]
3. 搭建開發(fā)環(huán)境。
   1. 開始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
   4. 鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

5 代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，對(duì)于完整代碼，我們會(huì)在gitee中提供。

├──entry/src/main/ets                // 代碼區(qū)
│  ├──common
│  │  └──constants
│  │     └──Constants.ets            // 常量類
│  ├──entryability
│  │  └──EntryAbility.ts             // 程序入口類
│  ├──pages
│  │  └──IndexPage.ets               // 二級(jí)聯(lián)動(dòng)頁(yè)面入口
│  ├──view
│  │  ├──ClassifyItem.ets            // 課程分類組件
│  │  └──CourseItem.ets              // 課程信息組件
│  └──viewmodel                          
│     ├──ClassifyModel.ets           // 導(dǎo)航Model
│     ├──ClassifyViewModel.ets       // 導(dǎo)航ViewModel
│     ├──CourseModel.ets             // 課程內(nèi)容Model
│     └──LinkDataModel.ets           // 數(shù)據(jù)源Model
└──entry/src/main/resources          // 資源文件

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

6 二級(jí)聯(lián)動(dòng)實(shí)現(xiàn)

界面整體使用Row組件實(shí)現(xiàn)橫向布局，分為左右兩部分。均使用List組件實(shí)現(xiàn)對(duì)導(dǎo)航和內(nèi)容的數(shù)據(jù)展示，導(dǎo)航部分固定寬度，內(nèi)容部分自適應(yīng)屏幕剩余寬度并用ListItemGroup完成每個(gè)導(dǎo)航下的內(nèi)容布局。

Row() {
  List({ scroller: this.classifyScroller }) {
    ForEach(this.classifyList, (item: ClassifyModel, index: number) = > {
      ListItem() {
        ClassifyItem({
          classifyName: item.classifyName,
          isSelected: this.currentClassify === index,
          onClickAction: () = > this.classifyChangeAction(index, true)
        })
      }
    }, (item: ClassifyModel) = > item.classifyName + this.currentClassify)
  }

  List({ scroller: this.scroller }) {
    ForEach(this.classifyList, (classifyItem: ClassifyModel) = > {
      ListItemGroup({
        header: this.ClassifyHeader(classifyItem.classifyName),
        space: Constants.COURSE_ITEM_PADDING
      }) {
        ForEach(classifyItem.courseList, (courseItem: CourseModel) = > {
          ListItem() {
            CourseItem({ itemStr: JSON.stringify(courseItem) })
          }
        }, courseItem = > courseItem.courseId)
      }
    }, item = > item.classifyId)
  }
  .sticky(StickyStyle.Header)
  .layoutWeight(1)
  .edgeEffect(EdgeEffect.None)
  .onScrollIndex((start: number) = > this.classifyChangeAction(start, false))
}

點(diǎn)擊左側(cè)導(dǎo)航時(shí)，右側(cè)內(nèi)容區(qū)域通過scrollToIndex方法跳轉(zhuǎn)到對(duì)應(yīng)的內(nèi)容頁(yè)面，并改變導(dǎo)航的選中狀態(tài)。同理在滾動(dòng)右側(cè)內(nèi)容的過程中，如果當(dāng)前展示的ListItemGroup發(fā)生改變時(shí)，修改左側(cè)導(dǎo)航的選中狀態(tài)，并滾到到對(duì)應(yīng)的導(dǎo)航item。

classifyChangeAction(index: number, isClassify: boolean) {
  if (this.currentClassify !== index) {
    // change the classify status
    this.currentClassify = index;
    if (isClassify) {
      // scroll the course scroll
      this.scroller.scrollToIndex(index);
    } else {
      // scroll the classify scroll
      this.classifyScroller.scrollToIndex(index);
    }
  }
}

審核編輯 黃宇