优化首页显示

app/src/main/ets/model/Home.ets

@@ -0,0 +1,26 @@
+
+export class HomeItem {
+  /**
+   * 列表项名称
+   */
+  name: ResourceStr = '';
+  /**
+   * 列表项要打开的页面路径
+   */
+  page?: string;
+}
+
+export class HomeItemGroup {
+  /**
+   * 分组的名称
+   */
+  name: ResourceStr = '';
+  /**
+   * 分组图标
+   */
+  icon?: Resource;
+  /**
+   * 分组的Item列表
+   */
+  items: HomeItem[] = [];
+}

app/src/main/ets/pages/Index.ets

@@ -1,4 +1,4 @@
-import { TitleBar } from '@devwiki/common_ui';
+import { CommonRes, TitleBar } from '@devwiki/common_ui';
 import web_webview from '@ohos.web.webview';
 import { TitleBarMenuType } from '@devwiki/common_ui';
 import { router, window } from '@kit.ArkUI';
@@ -6,6 +6,7 @@ import promptAction from '@ohos.promptAction';
 import { BusinessError } from '@ohos.base';
 import { Log } from '@devwiki/base';
 import { BaseLocalStorage, ScreenUtil } from '@devwiki/base';
+import { HomeItem, HomeItemGroup } from '../model/Home';
 
 @CustomDialog
 struct WebViewDialog {
@@ -28,6 +29,40 @@ struct WebViewDialog {
 @Component
 struct Index {
   @State title: string = "Home";
+  readonly itemGroups: HomeItemGroup[] = [
+    //Web部分
+    {
+      name: 'Web',
+      items: [
+        { name: 'WebPage', page: 'pages/web/WebPage' },
+        { name: 'WebDialogPage', page: 'pages/web/WebDialogPage' }
+      ]
+    },
+    // 布局
+    {
+      name: 'Layout',
+      items: [
+        { name: 'LinearLayout', page: 'pages/layout/LinearLayoutPage' },
+        { name: 'RelativeContainer', page: 'pages/layout/RelativeContainerPage' },
+      ]
+    },
+    //动画
+    {
+      name: "Animation",
+      items: [
+        { name: 'CompTransition', page: 'pages/animation/CompTransitionPage'},
+      ]
+    },
+    // 多媒体
+    {
+      name: 'Multimedia',
+      items: [
+        { name: 'AVPlayer', page: 'pages/media/AVPlayerPage' },
+      ]
+    }
+  ];
+
+
   dialogController: CustomDialogController = new CustomDialogController({
     builder: WebViewDialog(),
     alignment: DialogAlignment.BottomEnd,
@@ -89,6 +124,33 @@ struct Index {
     return true;
   }
 
+  @Builder
+  groupBuilder(group: HomeItemGroup) {
+    Row(){
+      if (group.icon) {
+        Image(group.icon).width(24).height(24).margin({right: 8});
+      }
+      Text(group.name);
+    }.height(32).width('100%').padding({left: 8, right: 8})
+    .backgroundColor('#e0e0e0').alignItems(VerticalAlign.Center)
+  }
+
+  @Builder
+  itemBuilder(item: HomeItem) {
+    Column() {
+      Row() {
+        Text(item.name);
+        Image(CommonRes.getImageRes(CommonRes.IC_CHEVRON_RIGHT)).width(32).height(32);
+      }.width('100%').height(48).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Center)
+      .padding({left: 16, right: 16})
+      Divider().margin({ top: 2 });
+    }.onClick(() => {
+      if (item.page) {
+        this.getUIContext().getRouter().pushUrl({url: item.page })
+      }
+    })
+  }
+
   build() {
     Column() {
       TitleBar({
@@ -99,29 +161,15 @@ struct Index {
         rightMenuType: TitleBarMenuType.None
       }).width('100%')
 
-      Column({space: 8}) {
+      List(){
-        Row() {
+        ForEach(this.itemGroups, (group: HomeItemGroup) => {
-          Button("WebDialog").width(100).height('100%').type(ButtonType.Normal)
+          ListItemGroup({header: this.groupBuilder(group)}) {
-            .onClick(async () => {
+            ForEach(group.items, (item: HomeItem) => {
-              this.dialogController.open()
+              this.itemBuilder(item);
-            });
+            })
-
+          }
-          Button("Layout").width(100).height('100%').type(ButtonType.Normal).onClick(() => {
+        })
-            router.pushUrl({ url: "pages/layout/LinearLayoutPage" });
+      }.width('100%').height('100%').margin({top: 16})
-          });
-
-          Button("Animation").width(100).height('100%').type(ButtonType.Normal).onClick(() => {
-            router.pushUrl({ url: "pages/animation/CompTransitionPage" });
-          });
-        }.width('100%').height(48).justifyContent(FlexAlign.SpaceEvenly)
-
-        Row() {
-          Button("AVPlayer").width(100).height('100%').type(ButtonType.Normal).onClick(() => {
-            router.pushUrl({ url: "pages/media/AVPlayerPage" });
-          });
-
-        }.width('100%').height(48).justifyContent(FlexAlign.SpaceEvenly)
-      }.width('100%')
     }.width('100%').height('100%')
   }
 }

app/src/main/ets/pages/component/TextPage.ets

@@ -0,0 +1,8 @@
+
+@Entry
+@Component
+struct TextPage {
+
+  build() {
+  }
+}

app/src/main/ets/pages/layout/RelativeContainerPage.ets

@@ -0,0 +1,27 @@
+import { ComponentConst } from '@devwiki/common_ui/Index'
+
+
+@Entry
+@Component
+export struct RelativeContainerPage {
+
+  build() {
+    RelativeContainer() {
+      Button('1111')
+        .alignRules({
+          top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top },
+          left: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.Start },
+          bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
+        }).id('left_menu')
+
+      Button(){
+        Text("2222").height(64)
+      }
+        .alignRules({
+          top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top },
+          right: { anchor: ComponentConst.ContainerId, align: HorizontalAlign.End },
+          bottom: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom }
+        }).id('right_menu')
+    }.height(64).width('100%').backgroundColor(Color.Red)
+  }
+}

app/src/main/ets/pages/web/WebDialogPage.ets

@@ -12,4 +12,12 @@ export struct WebPageDialog {
       this.dialogController.close();
     }}).height(this.isPortrait ? '95%' : '90%').width(this.isPortrait ? '100%' : '50%')
   }
+}
+
+@Entry
+@Component
+export struct WebDialogPage {
+
+  build() {
+  }
 }

app/src/main/resources/base/profile/main_pages.json

@@ -2,7 +2,9 @@
   "src": [
     "pages/Index",
     "pages/web/WebPage",
+    "pages/web/WebDialogPage",
     "pages/layout/LinearLayoutPage",
+    "pages/layout/RelativeContainerPage",
     "pages/animation/CompTransitionPage",
     "pages/media/AVPlayerPage"
   ]

common_ui/Index.ets

@@ -1,5 +1,4 @@
 export { TitleBar, TitleBarMenuType } from './src/main/ets/component/TitleBar'
 export { ComponentConst } from './src/main/ets/component/ComponentConst'
-export { WebViewEventKey } from '../base/src/main/ets/event/EventKey'
 export { WebView, WebViewController, WebViewParam } from './src/main/ets/component/web/WebView'
 export { CommonRes, CommonMediaName } from './src/main/ets/utils/CommonRes'

common_ui/src/main/ets/utils/CommonRes.ets

@@ -1,5 +1,8 @@
 
 export class CommonRes {
+  static readonly IC_CHEVRON_LEFT = "ic_chevron_left";
+  static readonly IC_CHEVRON_RIGHT = "ic_chevron_right";
+
   private constructor() {
   }
 
@@ -7,10 +10,14 @@ export class CommonRes {
     return $r("app.media.ic_refresh");
   }
 
-  public static getIconBack(): Resource {
+  public static getIconChevronLeft(): Resource {
     return $r("app.media.ic_chevron_left");
   }
 
+  public static getIconChevronRight(): Resource {
+    return $r("app.media.ic_chevron_right");
+  }
+
   public static getIconClose(): Resource {
     return $r("app.media.ic_close");
   }

common_ui/src/main/resources/base/media/ic_chevron_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>chevron-right</title><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>