v5.0

项目界面

README.md

@@ -42,4 +42,11 @@
 * ForEach循环生成多组件
 * ListItemGroup分组列表组件
 * Flex弹性布局组件
-* 导航页面
+* 导航页面
+
+### 3.5 v5.0
+
+* Tabs+ForEach(TabContent(TreeList-数据列表)+tabBar)组件展示各Tab标题下对应的列表
+* `@Watch装饰器`：状态变量更改通知。@Watch('changeTab')中声明changeTab方法
+* `@Link装饰器`：父子双向同步。@Link currentIndex: number中父组件ProjectPage传递当前tabIndex给ProjectList用于展示列表数据
+* 项目界面

entry/src/main/ets/bean/ProjectBean.ets

@@ -16,7 +16,7 @@ export class ProjectItem {
   id: number = 0;
   lisense: string = '';
   lisenseLink: string = '';
-  name: string = '';
+  name: string = ''; //显示的tab标题名字
   order: number = 0;
   parentChapterId: number = 0;
   type: number = 0;

entry/src/main/ets/common/constants/Constants.ets

@@ -45,4 +45,12 @@ export default class Constants {
    * Page transition exit delay.
    */
   static readonly EXIT_DELAY: number = 100;
+  /**
+   * Type font weight.
+   */
+  static readonly TYPE_FONT_WEIGHT: number = 700;
+  /**
+   * Desc font weight.
+   */
+  static readonly DESC_FONT_WEIGHT: number = 400;
 }

entry/src/main/ets/pages/ProjectPage.ets

@@ -1,35 +1,61 @@
 // 导入页面路由模块
 import router from '@ohos.router';
+import { ProjectItem } from '../bean/ProjectBean';
+import Constants from '../common/constants/Constants';
+import ProjectList from '../view/ProjectList';
 import ProjectViewModel from '../viewmodel/ProjectViewModel';
 
 /**
  * @desc:3-项目
  */
-
+@Entry
 @Component
 export default struct ProjectPage {
-
+  @State projectData: ProjectItem[] = [];
+  @State currentIndex: number = 0;
+  @State optionsDic: Map<number, number> = new Map();
   //页面即将显示时
   aboutToAppear() {
     //1-项目分类
-    ProjectViewModel.getProject().then(result => {
+    ProjectViewModel.getProject().then((result: ProjectItem[]) => {
       console.log('project>>>', result)
+      this.projectData = result
+      this.projectData.forEach((project, index) => {
+        this.optionsDic[index] = project.id //将tab_index对应的cid放到map中
+      })
     })
-    //2-项目列表
-    ProjectViewModel.getProjectList(1, 294).then(result => {
-      console.log('getProjectList>>>', result)
+  }
+
+  //自定义Tab
+  @Builder TabBuilder(index: number) {
+    Column() {
+      Text(this.projectData[index].name)
+        .height(Constants.FULL_PERCENT)
+        .fontSize(this.currentIndex === index ? $r('app.float.24fp') : $r('app.float.18fp'))
+        .fontWeight(this.currentIndex === index ? Constants.TYPE_FONT_WEIGHT : Constants.DESC_FONT_WEIGHT)
+        .fontColor($r('app.color.black'))
+    }
+    .padding({ left: $r('app.float.8vp'), right: $r('app.float.8vp') })
+    .margin({
+      left: index === 0 ? $r('app.float.8vp') : 0,
+      right: index === this.projectData.length - 1 ? $r('app.float.8vp') : 0
     })
   }
 
   build() {
-    Row() {
-      Column() {
-        Text("项目")
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
-      }
-      .width('100%')
+    Tabs({ barPosition: BarPosition.Start }) {
+      ForEach(this.projectData, (projectItem: ProjectItem, index?: number) => {
+        TabContent() {
+          ProjectList({ index, optionsDic: this.optionsDic, currentIndex: $currentIndex })
+        }.tabBar(this.TabBuilder(index))
+      }, (tabItem: ProjectItem) => JSON.stringify(tabItem))
     }
-    .height('100%')
+    .barHeight($r('app.float.50vp'))
+    .height(Constants.FULL_PERCENT)
+    .barMode(BarMode.Scrollable)
+    .onChange((index: number) => {
+      this.currentIndex = index;
+    })
+    .vertical(false)
   }
 }

entry/src/main/ets/pages/TreePage.ets

@@ -9,45 +9,6 @@ import TreeViewModel from '../viewmodel/TreeViewModel';
 @Entry
 @Component
 export default struct TreePage {
-  contactsGroups: object[] = [
-    {
-      title: '开发环境',
-      contacts: [
-        'Android Studio相关',
-        'gradle',
-        '官方发布',
-        '90-120hz'
-      ],
-    },
-    {
-      title: '基础知识',
-      contacts: [
-        'Drawable',
-        'deep link',
-        '基础概念',
-        'adb',
-        '字符编码',
-        '线程池',
-        'Span',
-        '多线程与并发',
-        'Apk诞生记',
-        '序列化',
-        '多进程',
-      ],
-    },
-    {
-      title: '四大组件',
-      contacts: [
-        'Activity',
-        'Service',
-        'BroadcastReceiver',
-        'ContentProvider',
-        'Intent',
-        'Context',
-        'handler',
-      ],
-    },
-  ]
   @State treeData: TreeItem[] = [];
 
   //页面即将显示时

entry/src/main/ets/view/ProjectList.ets

@@ -0,0 +1,45 @@
+/**
+ * @desc：项目-列表
+ */
+import { Article, ArticleList } from '../bean/ArticleBean';
+import ProjectViewModel from '../viewmodel/ProjectViewModel';
+import ArticleItem from './ArticleItem';
+
+@Component
+export default struct ProjectList {
+  index: number = 0;
+  optionsDic: Map<number, number> = new Map
+  @Watch('changeTab') @Link currentIndex: number;
+  @State articleListData: ArticleList = new ArticleList();
+
+  //与@Watch('changeTab')中的changeTab保持一致。 @Watch装饰器：状态变量更改通知  @Link装饰器：父子双向同步
+  changeTab() {
+    if (this.currentIndex !== this.index) {
+      return;
+    }
+    //2-项目列表
+    ProjectViewModel.getProjectList(1, this.optionsDic[this.currentIndex]).then((data: ArticleList) => {
+      console.log('getProjectList>>>', data)
+      this.articleListData = data
+    })
+    // ProjectViewModel.getProjectList(1, 294).then((data: ArticleList) => {
+    //   this.articleListData = data
+    // })
+  }
+
+  aboutToAppear() {
+    // Load data.
+    this.changeTab()
+  }
+
+  build() {
+    //Article
+    List() {
+      ForEach(this.articleListData.datas, (article: Article) => {
+        ListItem() {
+          ArticleItem({ article: article })
+        }
+      })
+    }
+  }
+}

entry/src/main/ets/viewmodel/ProjectViewModel.ets

@@ -5,15 +5,15 @@ import HttpConfig from '../api/HttpConfig';
 import { projectListReq, projectReq } from '../api/HttpRequest';
 import ResponseResult from '../api/ResponseResult';
 import { ArticleList } from '../bean/ArticleBean';
-import { ProjectData } from '../bean/ProjectBean';
+import { ProjectData, ProjectItem } from '../bean/ProjectBean';
 import Logger from '../utils/Logger';
 
 class ProjectViewModel {
 
   //3-项目页面数据接口
 
   //项目分类
-  getProject(): Promise<ProjectData> {
+  getProject(): Promise<ProjectItem[]> {
     return new Promise(async (resolve: Function, reject: Function) => {
       projectReq().then((data: ResponseResult) => {
         if (data.errorCode === HttpConfig.SERVER_CODE_SUCCESS) {

entry/src/main/resources/base/element/float.json

@@ -92,6 +92,26 @@
       "name": "20fp",
       "value": "20fp"
     },
+    {
+      "name": "21fp",
+      "value": "21fp"
+    },
+    {
+      "name": "22fp",
+      "value": "22fp"
+    },
+    {
+      "name": "23fp",
+      "value": "23fp"
+    },
+    {
+      "name": "24fp",
+      "value": "24fp"
+    },
+    {
+      "name": "25fp",
+      "value": "25fp"
+    },
     {
       "name": "1vp",
       "value": "1vp"