diff --git a/app/src/main/ets/model/Home.ets b/app/src/main/ets/model/Home.ets new file mode 100644 index 0000000..801768b --- /dev/null +++ b/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[] = []; +} \ No newline at end of file diff --git a/app/src/main/ets/pages/Index.ets b/app/src/main/ets/pages/Index.ets index d84b0e6..7f4364c 100644 --- a/app/src/main/ets/pages/Index.ets +++ b/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}) { - Row() { - Button("WebDialog").width(100).height('100%').type(ButtonType.Normal) - .onClick(async () => { - this.dialogController.open() - }); - - Button("Layout").width(100).height('100%').type(ButtonType.Normal).onClick(() => { - router.pushUrl({ url: "pages/layout/LinearLayoutPage" }); - }); - - 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%') + List(){ + ForEach(this.itemGroups, (group: HomeItemGroup) => { + ListItemGroup({header: this.groupBuilder(group)}) { + ForEach(group.items, (item: HomeItem) => { + this.itemBuilder(item); + }) + } + }) + }.width('100%').height('100%').margin({top: 16}) }.width('100%').height('100%') } } \ No newline at end of file diff --git a/app/src/main/ets/pages/component/TextPage.ets b/app/src/main/ets/pages/component/TextPage.ets new file mode 100644 index 0000000..229c746 --- /dev/null +++ b/app/src/main/ets/pages/component/TextPage.ets @@ -0,0 +1,8 @@ + +@Entry +@Component +struct TextPage { + + build() { + } +} \ No newline at end of file diff --git a/app/src/main/ets/pages/layout/RelativeContainerPage.ets b/app/src/main/ets/pages/layout/RelativeContainerPage.ets new file mode 100644 index 0000000..4a88899 --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/app/src/main/ets/pages/web/WebPageDialog.ets b/app/src/main/ets/pages/web/WebDialogPage.ets similarity index 86% rename from app/src/main/ets/pages/web/WebPageDialog.ets rename to app/src/main/ets/pages/web/WebDialogPage.ets index ec2344c..6dede72 100644 --- a/app/src/main/ets/pages/web/WebPageDialog.ets +++ b/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() { + } } \ No newline at end of file diff --git a/app/src/main/resources/base/profile/main_pages.json b/app/src/main/resources/base/profile/main_pages.json index 42a9b16..bd15215 100644 --- a/app/src/main/resources/base/profile/main_pages.json +++ b/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" ] diff --git a/common_ui/Index.ets b/common_ui/Index.ets index 9b3d1ea..69286bc 100644 --- a/common_ui/Index.ets +++ b/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' diff --git a/common_ui/src/main/ets/utils/CommonRes.ets b/common_ui/src/main/ets/utils/CommonRes.ets index 672de63..b1359a5 100644 --- a/common_ui/src/main/ets/utils/CommonRes.ets +++ b/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"); } diff --git a/common_ui/src/main/resources/base/media/ic_chevron_right.svg b/common_ui/src/main/resources/base/media/ic_chevron_right.svg new file mode 100644 index 0000000..dacc49f --- /dev/null +++ b/common_ui/src/main/resources/base/media/ic_chevron_right.svg @@ -0,0 +1 @@ +chevron-right \ No newline at end of file