1 卡片介紹

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

2 標(biāo)題

二級聯(lián)動（ArkTS）

3 介紹

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

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

效果如圖所示：

相關(guān)概念

• [List]：列表包含一系列相同寬度的列表項。適合連續(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ā)板類型：[潤和RK3568開發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

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

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

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

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在gitee中提供。

├──entry/src/main/ets                // 代碼區(qū)
│  ├──common
│  │  └──constants
│  │     └──Constants.ets            // 常量類
│  ├──entryability
│  │  └──EntryAbility.ts             // 程序入口類
│  ├──pages
│  │  └──IndexPage.ets               // 二級聯(lián)動頁面入口
│  ├──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 二級聯(lián)動實現(xiàn)

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

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

審核編輯 黃宇