diff --git a/build-profile.json5 b/build-profile.json5 index 7d23ab9..cf61732 100644 --- a/build-profile.json5 +++ b/build-profile.json5 @@ -22,13 +22,13 @@ "name": "default", "type": "HarmonyOS", "material": { - "certpath": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony_demo_panel_com.example.myapplication_70086000144137060.cer", - "storePassword": "0000001B767E7E8C6D3EBFB6061DAE0E0136D0BDF27E3115977950BFFF98B3355E9353160B972AA3C07C07", + "certpath": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony-template_com.example.myapplication_70086000144137060.cer", + "storePassword": "0000001A4E024BA063005297DAF51A4E6AC02DC4110DB0F9ECDE58FB011E8C50A5CC87E5863792EEDF4C", "keyAlias": "debugKey", - "keyPassword": "0000001BBD05595914755974A2674C85F88396B4366BFBEE8893724421C4C36C138D1BC83330092A159397", - "profile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony_demo_panel_com.example.myapplication_70086000144137060.p7b", + "keyPassword": "0000001A19D14859F9DF7CA863C1E9DBBFA175415654D0A40427DA68F389526520D09076BFCDEB369B0A", + "profile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony-template_com.example.myapplication_70086000144137060.p7b", "signAlg": "SHA256withECDSA", - "storeFile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony_demo_panel_com.example.myapplication_70086000144137060.p12" + "storeFile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony-template_com.example.myapplication_70086000144137060.p12" } } ] diff --git a/dependencies/hvigor-3.0.4-s.tgz b/dependencies/hvigor-3.0.9-s.tgz similarity index 63% rename from dependencies/hvigor-3.0.4-s.tgz rename to dependencies/hvigor-3.0.9-s.tgz index d48aed7..65b0d24 100644 Binary files a/dependencies/hvigor-3.0.4-s.tgz and b/dependencies/hvigor-3.0.9-s.tgz differ diff --git a/dependencies/hvigor-ohos-arkui-x-plugin-2.1.4-s.tgz b/dependencies/hvigor-ohos-arkui-x-plugin-2.1.7-s.tgz similarity index 84% rename from dependencies/hvigor-ohos-arkui-x-plugin-2.1.4-s.tgz rename to dependencies/hvigor-ohos-arkui-x-plugin-2.1.7-s.tgz index 63b037a..233a449 100644 Binary files a/dependencies/hvigor-ohos-arkui-x-plugin-2.1.4-s.tgz and b/dependencies/hvigor-ohos-arkui-x-plugin-2.1.7-s.tgz differ diff --git a/dependencies/hvigor-ohos-plugin-3.0.4-s.tgz b/dependencies/hvigor-ohos-plugin-3.0.4-s.tgz deleted file mode 100644 index dfaa3e5..0000000 Binary files a/dependencies/hvigor-ohos-plugin-3.0.4-s.tgz and /dev/null differ diff --git a/dependencies/hvigor-ohos-plugin-3.0.9-s.tgz b/dependencies/hvigor-ohos-plugin-3.0.9-s.tgz new file mode 100644 index 0000000..e2e499e Binary files /dev/null and b/dependencies/hvigor-ohos-plugin-3.0.9-s.tgz differ diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index ec6f5c3..99c3095 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -7,6 +7,7 @@ import window from '@ohos.window'; export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); + } onDestroy() { @@ -17,7 +18,7 @@ export default class EntryAbility extends UIAbility { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); - windowStage.loadContent('pages/Init', (err, data) => { + windowStage.loadContent('pages/Index', (err, data) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; @@ -34,6 +35,35 @@ export default class EntryAbility extends UIAbility { onForeground() { // Ability has brought to foreground hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); + AlertDialog.show( + { + title: 'title', + subtitle: 'subtitle', + message: 'text', + autoCancel: true, + alignment: DialogAlignment.Bottom, + gridCount: 4, + offset: { dx: 0, dy: -20 }, + primaryButton: { + value: 'cancel', + action: () => { + console.info('Callback when the first button is clicked') + } + }, + secondaryButton: { + enabled: true, + defaultFocus: true, + style: DialogButtonStyle.HIGHLIGHT, + value: 'ok', + action: () => { + console.info('Callback when the second button is clicked') + } + }, + cancel: () => { + console.info('Closed callbacks') + } + } + ) } onBackground() { diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index ecaecf9..f1abd0c 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -3,120 +3,17 @@ import { CustomPanel } from '../components/CustomPanel'; import curves from '@ohos.curves'; import { InnerView } from '../views/InnerView' -// 方案1：panel -// 方案2：模态转场 @Preview @Entry @Component struct Index { private TAG: string = 'Index' - private defaultWidth: number = 350 - @State message: string = "This a Template Project" - @State showPanel: boolean = false; - // 模态转场控制变量 - @State isPresent: boolean = false; - @State contentWidth: number | string = this.defaultWidth; - @State marginLeft: number = 0; - - @Builder - innerView() { - InnerView(); - } - - handleClose() { - this.isPresent = false; - } - - // sidebar控制变量 - controlValue = { - beginX: 0, - endX: 0, - maxMoveRate: 0.12, - swipeDirection: 0, // 0 is left, 1 is right - leftMoveDistance: 0, - } - - @Builder - SideBar() { - InnerView() - .margin({ left: -this.marginLeft }) - .width(this.contentWidth) - .height('100%') - .transition(// 通过转场动画实现出现消失转场动画效果，transition需要加在builder下的第一个组件 - TransitionEffect.translate({ x: '-' + this.contentWidth, y: 0, z: 0 }) - .animation({ curve: curves.springMotion(0.6, 0.8) }) - ) - .onTouch(event => { - // 按下赋初始值 - if (event.type === TouchType.Down) { - this.controlValue.beginX = event.touches[0].displayX; - this.controlValue.leftMoveDistance = 0; - } - // 移动改变移动宽度 - if (event.type === TouchType.Move) { - this.controlValue.endX = event.touches[0].displayX; // 手指停止的位置 - const moveDistance = this.controlValue.beginX - this.controlValue.endX; // 滑动的水平距离 - - // 判断水平滑动方向 - if (this.controlValue.leftMoveDistance > 0) { - this.controlValue.swipeDirection = 0; - } else { - this.controlValue.swipeDirection = 1; - } - - // 更新 - this.marginLeft = (this.marginLeft + moveDistance) > 0 ? (this.marginLeft + moveDistance) : 0; - - this.controlValue.beginX = this.controlValue.endX; - - this.controlValue.leftMoveDistance += moveDistance - } - - if (event.type === TouchType.Up) { - console.log(this.TAG, 'TouchType up' + this.controlValue.leftMoveDistance); - if (this.controlValue.leftMoveDistance > this.controlValue.maxMoveRate * +this.defaultWidth) { - this.isPresent = false; - } - this.marginLeft = 0; - } - }) - .gesture( - SwipeGesture({ direction: SwipeDirection.Horizontal }) - .onAction((event?: GestureEvent) => { - if (event && this.controlValue.swipeDirection == 0) { - this.isPresent = false; - this.marginLeft = 0; - } - }) - ) // 快速滑动关闭 - } build() { - Row() { - Button('open panel') - .onClick(() => this.showPanel = true); - Button('模态转场')// 通过选定的模态接口，绑定模态展示界面，ModalTransition是内置的ContentCover转场动画类型，这里选择None代表系统不加默认动画 - .bindContentCover(this.isPresent, this.SideBar, ModalTransition.NONE) - .onClick(() => { - if (this.isPresent) { - this.isPresent = false; - this.isPresent = true; - } else { - this.isPresent = true; - } - this.contentWidth = this.defaultWidth; - }) - - CustomPanel({ - contentView: () => this.innerView(), - show: this.showPanel, - defaultHeight: 500, - showDragBar: true - }); + Column() { + InnerView() } - .width('100%') .height('100%') - .justifyContent(FlexAlign.SpaceEvenly) - + .width('100%') } } diff --git a/entry/src/main/ets/utils/arrayUtil.ets b/entry/src/main/ets/utils/arrayUtil.ets new file mode 100644 index 0000000..6f2e471 --- /dev/null +++ b/entry/src/main/ets/utils/arrayUtil.ets @@ -0,0 +1,17 @@ +export function range(start: number, end: number) { + const length = end - start; + const arr: number[] = new Array(length).fill(0).map((_: number, idx: number) => idx) + return arr +} + + +@Observed +export class ObservedArray extends Array { + constructor(args?: T[]) { + if (args instanceof Array) { + super(...args) + } else { + super() + } + } +} diff --git a/entry/src/main/ets/viewModels/InnerViewModel.ets b/entry/src/main/ets/viewModels/InnerViewModel.ets new file mode 100644 index 0000000..8f49f52 --- /dev/null +++ b/entry/src/main/ets/viewModels/InnerViewModel.ets @@ -0,0 +1,32 @@ +import { ObservedArray, range } from '../utils/arrayUtil' + +@Observed +export class InnerViewModel { + dataList: number[]; + title: string = "This is a Inner View"; + constrain: (value: number) => boolean = () => true + + constructor(size: number = 3) { + this.dataList = range(0, size).reverse() + } + + getTitle() { + return this.title + } + + setConstrain(constrain: (value: number) => boolean = () => true) { + this.constrain = constrain + } + + getDataList() { + return this.dataList.filter(item => this.constrain(item)) + } + + addData() { + this.dataList = [this.dataList.length, ...this.dataList] + } + + rmData(data: number) { + this.dataList = this.dataList.filter(item => item == data) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/views/InnerView.ets b/entry/src/main/ets/views/InnerView.ets index 5e27511..f74127c 100644 --- a/entry/src/main/ets/views/InnerView.ets +++ b/entry/src/main/ets/views/InnerView.ets @@ -1,29 +1,42 @@ -// TODO: 请扫点距离返回动画 +import { ObservedArray, range } from '../utils/arrayUtil'; +import { InnerViewModel } from '../viewModels/InnerViewModel'; + @Preview @Component export struct InnerView { - @State message: string = "This is a Inner View"; + @State viewModel: InnerViewModel = new InnerViewModel(12) build() { - Column() { - Text(this.message) - .margin({ top: 10, bottom: 10 }) - Scroll() { - Column() { - ForEach(Array.from({ length: 20 }).map((_, idx) => idx + 1), item => { + Column({ space: 10 }) { + Text(this.viewModel.title) + + Search().onChange(value => { + value.trim() ? + this.viewModel.setConstrain(it => value.includes(String(it))) : + this.viewModel.setConstrain() + }) + + Button('Add Data').onClick(() => { + this.viewModel.addData() + }) + + List({ space: 10 }) { + ForEach(this.viewModel.getDataList(), (item: number) => { + ListItem() { Text(`item: ${item}`) - .width('100%') .backgroundColor('#FFFFFF') .height(60) - .margin({ bottom: 10 }) .borderRadius(8) + .width('100%') .padding({ left: 16, right: 16 }) - }) - } - .width('100%') - .padding({ left: 16, right: 16 }) + } + }, (item: number) => String(item)) } + .scrollBar(BarState.Off) + .layoutWeight(1) } + .padding({ left: 16, right: 16, top: 16, bottom: 16 }) + .width('100%') .backgroundColor('#E6E8EC') } } diff --git a/hvigor/hvigor-config.json5 b/hvigor/hvigor-config.json5 index 4e8b451..3d313b7 100644 --- a/hvigor/hvigor-config.json5 +++ b/hvigor/hvigor-config.json5 @@ -1,7 +1,7 @@ { - "hvigorVersion": "file:../dependencies/hvigor-3.0.4-s.tgz", + "hvigorVersion": "file:../dependencies/hvigor-3.0.9-s.tgz", "dependencies": { - "@ohos/hvigor-ohos-plugin": "file:../dependencies/hvigor-ohos-plugin-3.0.4-s.tgz", + "@ohos/hvigor-ohos-plugin": "file:../dependencies/hvigor-ohos-plugin-3.0.9-s.tgz", "rollup": "file:../dependencies/rollup.tgz" }, "execution": {