v4.0

导航界面

README.md

@@ -35,4 +35,11 @@
 * Swiper实现轮播图
 * @State实现数据变化监听
 * 样式文件实现复杂布局
-* Resource：color-颜色命名文字不能大写，float-fp后缀对应文字，vp后缀对应宽度长度
+* Resource：color-颜色命名文字不能大写，float-fp后缀对应文字，vp后缀对应宽度长度
+
+### 3.4 v4.0
+
+* ForEach循环生成多组件
+* ListItemGroup分组列表组件
+* Flex弹性布局组件
+* 导航页面

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

@@ -1,34 +1,106 @@
 // 导入页面路由模块
 import router from '@ohos.router';
+import { TreeItem } from '../bean/TreeBean';
 import TreeViewModel from '../viewmodel/TreeViewModel';
 
 /**
  * @desc:2-导航
  */
-
+@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[] = [];
+
   //页面即将显示时
   aboutToAppear() {
     //1-体系数据
     TreeViewModel.getTreeData().then(result => {
       console.log('tree>>>', result)
+      this.treeData = result
     })
     //2-知识体系下的文章
     TreeViewModel.getTreeArticleList(0, 60).then(result => {
       console.log('treeArticle>>>', result)
     })
   }
+  //分组-头部组件
+  @Builder itemHead(text: string) {
+    // 列表分组的头部组件，对应联系人分组A、B等位置的组件
+    Text(text)
+      .fontSize($r('app.float.20fp'))
+      .fontWeight(FontWeight.Bold)
+      .backgroundColor($r('app.color.light_gray'))
+      .width('100%')
+      .padding(5)
+  }
 
   build() {
-    Row() {
-      Column() {
-        Text("导航")
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
-      }
-      .width('100%')
+    List() {
+      ForEach(this.treeData, treeItem => {
+        ListItemGroup({ header: this.itemHead(treeItem.name) }) {
+          //循环渲染ListItem
+          ListItem() {
+            Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {
+              ForEach(treeItem.children, (item) => {
+                Text(item.name)
+                  .textAlign(TextAlign.Center)
+                  .height($r('app.float.30vp'))
+                  .border({ width: 1 })
+                  .borderColor(Color.Black)
+                  .borderRadius(2)
+                  .padding({
+                    top: $r('app.float.2vp'),
+                    bottom: $r('app.float.2vp'),
+                    left: $r('app.float.5vp'),
+                    right: $r('app.float.5vp')
+                  })
+                  .margin($r('app.float.5vp'))
+              })
+            }.width('90%').padding($r('app.float.10vp'))
+          }
+        }
+      })
     }
     .height('100%')
+    .width('100%')
   }
 }

entry/src/main/ets/viewmodel/TreeViewModel.ets

@@ -4,14 +4,14 @@
 import HttpConfig from '../api/HttpConfig';
 import { treeListReq, treeReq } from '../api/HttpRequest';
 import ResponseResult from '../api/ResponseResult';
-import { TreeArticle, TreeData } from '../bean/TreeBean';
+import { TreeArticle, TreeData, TreeItem } from '../bean/TreeBean';
 import Logger from '../utils/Logger';
 
 class TreeViewModel {
 
   //2-Tree(导航)页面数据接口
 
-  getTreeData(): Promise<TreeData> {
+  getTreeData(): Promise<TreeItem[]> {
     return new Promise(async (resolve: Function, reject: Function) => {
       treeReq().then((data: ResponseResult) => {
         if (data.errorCode === HttpConfig.SERVER_CODE_SUCCESS) {

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

@@ -212,6 +212,10 @@
       "name": "30vp",
       "value": "30vp"
     },
+    {
+      "name": "40vp",
+      "value": "40vp"
+    },
     {
       "name": "50vp",
       "value": "50vp"