1 卡片介紹

使用ArkTS語言，實現一個導航與內容二級聯動的效果。

2 標題

二級聯動（ArkTS）

3 介紹

介紹了如何基于List組件實現一個導航和內容的二級聯動效果。樣例主要包含以下功能：

切換左側導航，右側滾動到對應的內容。
滾動右側的內容，左側會切換對應的導航。

效果如圖所示：

4 環境搭建

軟件要求

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

硬件要求

開發板類型：[潤和RK3568開發板]。
OpenHarmony系統：3.2 Release。

環境搭建

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

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

5 代碼結構解讀

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

├──entry/src/main/ets                // 代碼區
│  ├──common
│  │  └──constants
│  │     └──Constants.ets            // 常量類
│  ├──entryability
│  │  └──EntryAbility.ts             // 程序入口類
│  ├──pages
│  │  └──IndexPage.ets               // 二級聯動頁面入口
│  ├──view
│  │  ├──ClassifyItem.ets            // 課程分類組件
│  │  └──CourseItem.ets              // 課程信息組件
│  └──viewmodel                          
│     ├──ClassifyModel.ets           // 導航Model
│     ├──ClassifyViewModel.ets       // 導航ViewModel
│     ├──CourseModel.ets             // 課程內容Model
│     └──LinkDataModel.ets           // 數據源Model
└──entry/src/main/resources          // 資源文件

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

搜狗高速瀏覽器截圖20240326151344.png

6 二級聯動實現

界面整體使用Row組件實現橫向布局，分為左右兩部分。均使用List組件實現對導航和內容的數據展示，導航部分固定寬度，內容部分自適應屏幕剩余寬度并用ListItemGroup完成每個導航下的內容布局。

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))
}

點擊左側導航時，右側內容區域通過scrollToIndex方法跳轉到對應的內容頁面，并改變導航的選中狀態。同理在滾動右側內容的過程中，如果當前展示的ListItemGroup發生改變時，修改左側導航的選中狀態，并滾到到對應的導航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);
    }
  }
}