## 项目开发前问题概述与前期准备

1.问题概述

遇到从接口中获取的数据层次非常多的情况该如何处理？

2.前提

（1）任务界面实现状态与目标

已经有了静态页面结构，希望从远端API接口中获取动态数据 静态的界面：

目标界面：

（2）任务数据来源

数据从以下接口获取（具体取得方法详见juejin.cn/spost/73671…）

二、处理过程与分析

1.需要调整的目标代码

需要调整的组件代码演示：

import { iQuestionType } from '../../models/CategoryModel'
import { QuestionListComp } from './QuestionListComp'
​
@Entry
@Component
export struct HomeCategoryComp {
  @State
  questionTypeList: iQuestionType[] = [
    {
      id: 1,
      name: 'html',
      displayNewestFlag: 0
    },
    {
      id: 2,
      name: 'css',
      displayNewestFlag: 1
    }
  ]
  @State index: number = 0
​
  aboutToAppear(): void {
    this.loadData()
  }
​
  // 1.0 获取题目分类数据
  async loadData() {
    // 2.0 调用接口，注意：泛型传的是 iQuestionType[]
    let res = await HdHttp.get<iQuestionType[]>('hm/question/type')
    // 3. 0 将接口响应回来的数组赋值给状态属性
    this.questionTypeList = res.data
  }
​
  @Builder
  TabItemBuilder(q: iQuestionType, index: number) {
    Row() {
      Stack({ alignContent: Alignment.Bottom }) {
        Text(q.name)
          .fontSize(15)
          .height(43)
          .fontColor(this.index === index ? Color.Black : Color.Gray)
        Text()
          .width(this.index === index ? 20 : 0)
          .height(2)
          .backgroundColor(Color.Black)
          .animation({ duration: this.index === index ? 300 : 0 })
      }
      .padding({ left: index === 0 ? 16 : 0, })
​
      if (q.displayNewestFlag === 1) {
        Image($r("app.media.ic_home_new"))
          .width(32)
          .height(14)
          .objectFit(ImageFit.Contain)
          .margin({ left: 4 })
      }
    }
    .padding({ right: this.questionTypeList.length === index + 1 ? 54 : 16 })
  }
​
  build() {
    Stack({ alignContent: Alignment.TopEnd }) { //设置堆叠位置为右上角
      Tabs({ index: this.index }) {
        ForEach(this.questionTypeList, (item: iQuestionType, index: number) => {
          TabContent() {
          // 每个tab标签都有一个自己的List组件
            QuestionListComp()
          }.tabBar(this.TabItemBuilder(item, index))
        })
      }
      .height(450)
      .divider({
        strokeWidth: $r('app.float.common_border_width'),
        color: $r('app.color.common_gray_border')
      }) //设置tabbar下面的横线样式
      .barMode(BarMode.Scrollable) // 设置tabs可以滚动
      .barHeight(44)
      .onChange(i => this.index = i) // 切换tabbar内容
​
      Row() {
        // 过滤条件按钮
        Image($r('app.media.ic_home_filter'))
          .width(22)
          .height(44)
          .objectFit(ImageFit.Contain) // 设置图片按照容器大小填满
      }
      .width(54)
      .height(44)
      .justifyContent(FlexAlign.Center) // 图片居中对齐
      .backgroundColor(Color.White) // 设置背景色位白色，使过滤条件图标能遮盖住tabbar的文字
    }
  }
}

三、总结

1.项目过程流程图（数据动态化）

下面用流程图来对本次研究内容进行说明：

2.结构与路径的总结

（二）组件元素结构（典型）

重点理解一下本案例，虽然是典型案例，而有些案例可能更简单，另一些案例可能更复杂，但本案例难度适中，是相对有代表性的。