diff --git a/app/oh-package.json5 b/app/oh-package.json5 index f660669..eb7a723 100644 --- a/app/oh-package.json5 +++ b/app/oh-package.json5 @@ -5,6 +5,8 @@ "main": "", "author": "", "license": "", - "dependencies": {} + "dependencies": { + "@devwiki/common_ui": "file:../common_ui" + } } diff --git a/app/src/main/ets/pages/Index.ets b/app/src/main/ets/pages/Index.ets index 423b427..374b9eb 100644 --- a/app/src/main/ets/pages/Index.ets +++ b/app/src/main/ets/pages/Index.ets @@ -1,16 +1,23 @@ +import { TitleBar } from '@devwiki/common_ui/src/main/ets/component/TitleBar'; +import { ComposeTitleBar } from '@ohos.arkui.advanced.ComposeTitleBar'; +import { EditableTitleBar } from '@ohos.arkui.advanced.EditableTitleBar'; +import { SelectTitleBar } from '@ohos.arkui.advanced.SelectTitleBar'; + @Entry @Component struct Index { @State message: string = 'Hello World'; + onLeftClicked(event: ClickEvent) { + this.message = "TitleBar LeftClicked"; + } + build() { - Row() { - Column() { - Text(this.message) - .fontSize(50) - .fontWeight(FontWeight.Bold) - } - .width('100%') + Column() { + TitleBar({onLeftClicked: this.onLeftClicked}).height(48); + Divider(); + + Text(this.message); } .height('100%') } diff --git a/build-profile.json5 b/build-profile.json5 index 9b992d3..a95b4c6 100644 --- a/build-profile.json5 +++ b/build-profile.json5 @@ -2,7 +2,21 @@ // app的构建配置 "app": { //签名配置 - "signingConfigs": [], + "signingConfigs": [ + { + "name": "default", + "type": "HarmonyOS", + "material": { + "certpath": "C:\\Users\\zyz\\.ohos\\config\\default_HM4Demo_0I_80ITv-w7dlG1L2HWydZLUTxyIvnvhDmLyWt4xW5c=.cer", + "storePassword": "00000019BC13FA4B887BEC2E080C308036113BCA1D1D4599A04C7DE2FC056D9B3D5BBB3F90A2746AFA", + "keyAlias": "debugKey", + "keyPassword": "0000001912B1B816E14D7892380189718431BDF3997A14E9462470BCB07EBB257FE32FE777D748DAE3", + "profile": "C:\\Users\\zyz\\.ohos\\config\\default_HM4Demo_0I_80ITv-w7dlG1L2HWydZLUTxyIvnvhDmLyWt4xW5c=.p7b", + "signAlg": "SHA256withECDSA", + "storeFile": "C:\\Users\\zyz\\.ohos\\config\\default_HM4Demo_0I_80ITv-w7dlG1L2HWydZLUTxyIvnvhDmLyWt4xW5c=.p12" + } + } + ], //产品配置 "products": [ { diff --git a/common_ui/Index.ets b/common_ui/Index.ets index 77cd8a9..d2c3242 100644 --- a/common_ui/Index.ets +++ b/common_ui/Index.ets @@ -1 +1 @@ -export { add } from "./src/main/ets/utils/Calc" \ No newline at end of file +export { TitleBar } from './src/main/ets/component/TitleBar' \ No newline at end of file diff --git a/common_ui/src/main/ets/component/ComponentConst.ets b/common_ui/src/main/ets/component/ComponentConst.ets new file mode 100644 index 0000000..8b6a9ff --- /dev/null +++ b/common_ui/src/main/ets/component/ComponentConst.ets @@ -0,0 +1,4 @@ + +export class ComponentConst { + public static readonly ContainerId: string = "__container__"; +} diff --git a/common_ui/src/main/ets/component/TitleBar.ets b/common_ui/src/main/ets/component/TitleBar.ets new file mode 100644 index 0000000..d25c1e2 --- /dev/null +++ b/common_ui/src/main/ets/component/TitleBar.ets @@ -0,0 +1,83 @@ +import { ComponentConst } from './ComponentConst' + + +@Preview +@Component +export struct TitleBar { + + @State barHeight: number = 48; + @State menuPadding: number = 8; + + @State leftText: ResourceStr = "Back"; + @State leftTextVisible: Visibility = Visibility.Hidden; + @State leftIconVisible: Visibility = Visibility.Visible; + + @State rightText: ResourceStr = "Menu"; + @State rightTextVisible: Visibility = Visibility.Hidden; + @State rightIconVisible: Visibility = Visibility.Hidden; + + @State title: ResourceStr = "Title"; + @State titleTextAlign: TextAlign = TextAlign.Start; + @State titleVisible: Visibility = Visibility.Visible; + + onLeftClicked?: Function; + onRightClicked?: Function; + + build() { + Row() { + RelativeContainer() { + Button() { + Stack() { + Text(this.leftText).textAlign(TextAlign.Center) + .width(this.barHeight).height(this.barHeight).textAlign(TextAlign.Center) + .visibility(this.leftTextVisible) + Image($r("app.media.ic_chevron_left")) + .width(this.barHeight).height(this.barHeight).padding(this.menuPadding) + .visibility(this.leftIconVisible) + } + }.backgroundColor(0xFFFFFF).type(ButtonType.Normal).stateEffect(true) + .onClick((event) => { + this.onLeftClicked?.(event); + }).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") + + Text(this.title).visibility(this.titleVisible).textAlign(this.titleTextAlign).margin({left: this.menuPadding}) + .alignRules({ + top: { anchor: ComponentConst.ContainerId, align: VerticalAlign.Top}, + left: { anchor: "left_menu", align: HorizontalAlign.End}, + right: { anchor: "right_menu", align: HorizontalAlign.Start}, + bottom: {anchor: ComponentConst.ContainerId, align: VerticalAlign.Bottom } + }).id("center_row") + + Stack(){ + Button() { + Image($r("app.media.ic_close")) + .width(this.barHeight).height(this.barHeight) + .padding(this.menuPadding) + }.backgroundColor(0xFFFFFF).type(ButtonType.Normal).stateEffect(true).visibility(this.rightIconVisible) + .onClick((event) => { + this.onRightClicked?.(event); + }); + + Button() { + Text(this.rightText).textAlign(TextAlign.Center) + .width(this.barHeight).height(this.barHeight).textAlign(TextAlign.Center) + }.backgroundColor(0xFFFFFF).type(ButtonType.Normal).stateEffect(true).visibility(this.rightTextVisible) + .onClick((event) => { + this.onRightClicked?.(event); + }); + }.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") + } + .width('100%').height('100%') + }.height(this.barHeight) + } +} \ No newline at end of file diff --git a/common_ui/src/main/resources/base/media/ic_chevron_left.svg b/common_ui/src/main/resources/base/media/ic_chevron_left.svg new file mode 100644 index 0000000..eb37c0b --- /dev/null +++ b/common_ui/src/main/resources/base/media/ic_chevron_left.svg @@ -0,0 +1 @@ +chevron-left \ No newline at end of file diff --git a/common_ui/src/main/resources/base/media/ic_close.svg b/common_ui/src/main/resources/base/media/ic_close.svg new file mode 100644 index 0000000..c147635 --- /dev/null +++ b/common_ui/src/main/resources/base/media/ic_close.svg @@ -0,0 +1 @@ +close \ No newline at end of file