build-profile.json5

@@ -22,13 +22,13 @@
         "name": "default",
         "type": "HarmonyOS",
         "material": {
-          "certpath": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony-template_com.example.myapplication_70086000144137060.cer",
-          "storePassword": "0000001A4E024BA063005297DAF51A4E6AC02DC4110DB0F9ECDE58FB011E8C50A5CC87E5863792EEDF4C",
+          "certpath": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony_demo_panel_com.example.myapplication_70086000144137060.cer",
+          "storePassword": "0000001B767E7E8C6D3EBFB6061DAE0E0136D0BDF27E3115977950BFFF98B3355E9353160B972AA3C07C07",
           "keyAlias": "debugKey",
-          "keyPassword": "0000001A19D14859F9DF7CA863C1E9DBBFA175415654D0A40427DA68F389526520D09076BFCDEB369B0A",
-          "profile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony-template_com.example.myapplication_70086000144137060.p7b",
+          "keyPassword": "0000001BBD05595914755974A2674C85F88396B4366BFBEE8893724421C4C36C138D1BC83330092A159397",
+          "profile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony_demo_panel_com.example.myapplication_70086000144137060.p7b",
           "signAlg": "SHA256withECDSA",
-          "storeFile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony-template_com.example.myapplication_70086000144137060.p12"
+          "storeFile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony_demo_panel_com.example.myapplication_70086000144137060.p12"
         }
       }
     ]

entry/src/main/ets/entryability/EntryAbility.ets

@@ -7,7 +7,6 @@ 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() {
@@ -18,7 +17,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/Index', (err, data) => {
+    windowStage.loadContent('pages/Init', (err, data) => {
       if (err.code) {
         hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
         return;
@@ -35,35 +34,6 @@ 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() {

entry/src/main/ets/pages/Index.ets

@@ -3,17 +3,120 @@ 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() {
-    Column() {
-      InnerView()
+    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
+      });
     }
-    .height('100%')
     .width('100%')
+    .height('100%')
+    .justifyContent(FlexAlign.SpaceEvenly)
+
   }
 }

entry/src/main/ets/utils/arrayUtil.ets

@@ -1,17 +0,0 @@
-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<T> extends Array<T> {
-  constructor(args?: T[]) {
-    if (args instanceof Array) {
-      super(...args)
-    } else {
-      super()
-    }
-  }
-}

entry/src/main/ets/viewModels/InnerViewModel.ets

@@ -1,32 +0,0 @@
-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)
-  }
-}

entry/src/main/ets/views/InnerView.ets

@@ -1,42 +1,29 @@
-import { ObservedArray, range } from '../utils/arrayUtil';
-import { InnerViewModel } from '../viewModels/InnerViewModel';
-
+// TODO: 请扫点距离返回动画
 @Preview
 @Component
 export struct InnerView {
-  @State viewModel: InnerViewModel = new InnerViewModel(12)
+  @State message: string = "This is a Inner View";
 
   build() {
-    Column({ space: 10 }) {
-      Text(this.viewModel.title)
-
-      Search().onChange(value => {
-        value.trim() ?
-        this.viewModel.setConstrain(it => String(it).includes(value)) :
-        this.viewModel.setConstrain()
-      })
-
-      Button('Add Data').onClick(() => {
-        this.viewModel.addData()
-      })
-
-      List({ space: 10 }) {
-        ForEach(this.viewModel.getDataList(), (item: number) => {
-          ListItem() {
+    Column() {
+      Text(this.message)
+        .margin({ top: 10, bottom: 10 })
+      Scroll() {
+        Column() {
+          ForEach(Array.from({ length: 20 }).map((_, idx) => idx + 1), item => {
             Text(`item: ${item}`)
+              .width('100%')
               .backgroundColor('#FFFFFF')
               .height(60)
+              .margin({ bottom: 10 })
               .borderRadius(8)
-              .width('100%')
               .padding({ left: 16, right: 16 })
-          }
-        }, (item: number) => String(item))
+          })
+        }
+        .width('100%')
+        .padding({ left: 16, right: 16 })
       }
-      .scrollBar(BarState.Off)
-      .layoutWeight(1)
     }
-    .padding({ left: 16, right: 16, top: 16, bottom: 16 })
-    .width('100%')
     .backgroundColor('#E6E8EC')
   }
 }

hvigor/hvigor-config.json5

@@ -1,7 +1,7 @@
 {
-  "hvigorVersion": "file:../dependencies/hvigor-3.0.9-s.tgz",
+  "hvigorVersion": "file:../dependencies/hvigor-3.0.4-s.tgz",
   "dependencies": {
-    "@ohos/hvigor-ohos-plugin": "file:../dependencies/hvigor-ohos-plugin-3.0.9-s.tgz",
+    "@ohos/hvigor-ohos-plugin": "file:../dependencies/hvigor-ohos-plugin-3.0.4-s.tgz",
     "rollup": "file:../dependencies/rollup.tgz"
   },
   "execution": {