✨ Feat: finish break point

build-profile.json5

@@ -1,6 +1,20 @@
 {
   "app": {
-    "signingConfigs": [],
+    "signingConfigs": [
+      {
+        "name": "default",
+        "type": "HarmonyOS",
+        "material": {
+          "certpath": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony4-responsive_com.example.myapplication_70086000144137060.cer",
+          "storePassword": "000000190CA48C660A4FF99254B366FB0A4D57E1FBC7CFF641EE6E59304F667DD128E466E257E7F8E0",
+          "keyAlias": "debugKey",
+          "keyPassword": "00000019152A2D31516BA46158972FB5629B299DB5255852A18F95313D73ECEEF926B32DFD17417A88",
+          "profile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony4-responsive_com.example.myapplication_70086000144137060.p7b",
+          "signAlg": "SHA256withECDSA",
+          "storeFile": "C:\\Users\\Administrator\\.ohos\\config\\auto_debug_harmony4-responsive_com.example.myapplication_70086000144137060.p12"
+        }
+      }
+    ],
     "products": [
       {
         "name": "default",

entry/oh-package.json5

@@ -1,10 +1,10 @@
 {
+  "license": "",
+  "devDependencies": {},
+  "author": "",
   "name": "entry",
-  "version": "1.0.0",
   "description": "Please describe the basic information.",
   "main": "",
-  "author": "",
+  "version": "1.0.0",
-  "license": "",
   "dependencies": {}
 }
-

entry/src/main/ets/constants/CommonConstants.ets

@@ -0,0 +1,14 @@
+export class CommonConstants {
+  static readonly XS: string = 'xs'
+  static readonly SM: string = 'sm'
+  static readonly MD: string = 'md'
+  static readonly LG: string = 'lg'
+  static readonly BREAKPOINTS_XS: string = '0vp';
+  static readonly BREAKPOINTS_SM: string = '320vp';
+  static readonly BREAKPOINTS_MD: string = '520vp';
+  static readonly BREAKPOINTS_LG: string = '840vp';
+  static readonly BREAKPOINTS_SCOPE_1: string = '(width<320vp)'
+  static readonly BREAKPOINTS_SCOPE_2: string = '(320vp<=width<520vp)';
+  static readonly BREAKPOINTS_SCOPE_3: string = '(520vp<=width<840vp)';
+  static readonly BREAKPOINTS_SCOPE_4: string = '(840vp<=width)';
+}

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

@@ -17,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/GamePage', (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;

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

@@ -1,17 +1,78 @@
+import { CommonConstants as Const } from '../constants/CommonConstants';
+import BreakpointSystem from '../utils/BreakpointSystem';
+
 @Preview
 @Entry
 @Component
 struct Index {
-  @State message: string = "This a Template Project"
+  @State message: string = "This a Template Project";
+  @StorageProp('currentBreakpoint') currentBreakpoint: string = Const.LG;
+  private breakpointSystem: BreakpointSystem = new BreakpointSystem();
+
+  aboutToAppear() {
+    this.breakpointSystem.register();
+  }
+
+  aboutToDisappear() {
+    this.breakpointSystem.unregister();
+  }
 
   build() {
-    Row() {
+    Column() {
-      Text(this.message)
+      Row() {
-        .fontSize(40)
+        Text(this.currentBreakpoint)
-        .fontWeight(FontWeight.Bold)
+          .fontSize(40)
+          .fontWeight(FontWeight.Bold)
+      }
+
+      List() {
+        ForEach(Array.from({ length: 4 }), () => {
+          BlankItem().margin({ top: 16 })
+        })
+      }
+      .padding({
+        left: this.currentBreakpoint == Const.SM ? $r('app.string.main_page_padding2') : this.currentBreakpoint === Const.MD ? $r('app.string.main_page_padding3') : $r('app.string.main_page_padding4'),
+        right: this.currentBreakpoint == Const.SM ? $r('app.string.main_page_padding2') : this.currentBreakpoint === Const.MD ? $r('app.string.main_page_padding3') : $r('app.string.main_page_padding4'),
+      })
     }
     .height('100%')
-    .width('100%')
+    .backgroundColor($r('app.color.bg_gray'))
-    .justifyContent(FlexAlign.Center)
+  }
+}
+
+
+@Preview
+@Component
+struct BlankItem {
+  build() {
+    Column() {
+      Row() {
+        Text()
+          .width(32)
+          .height(32)
+          .borderRadius(16)
+          .backgroundColor($r('app.color.bg_gray'))
+          .margin({ right: 16 })
+        Text()
+          .height(20)
+          .width(100)
+          .borderRadius(6)
+          .backgroundColor($r('app.color.bg_gray'))
+      }
+      .margin({ bottom: 8 })
+
+      Row() {
+      }
+      .height(64)
+      .width('100%')
+      .borderRadius(6)
+      .backgroundColor($r('app.color.bg_gray'))
+    }
+    .width('100%')
+    .height(128)
+    .alignItems(HorizontalAlign.Start)
+    .padding({ top: 6, bottom: 6, left: 18, right: 18 })
+    .borderRadius(6)
+    .backgroundColor($r('app.color.start_window_background'))
   }
 }

entry/src/main/ets/utils/BreakpointSystem.ets

@@ -0,0 +1,58 @@
+import mediaQuery from '@ohos.mediaquery';
+import { CommonConstants as Const } from '../constants/CommonConstants';
+
+export default class BreakpointSystem {
+  private currentBreakpoint: string = Const.MD;
+  private xsListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_1);
+  private smListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_2);
+  private mdListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_3);
+  private lgListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_4);
+  private isBreakpointXS = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
+    if (mediaQueryResult.matches) {
+      this.updateCurrentBreakpoint(Const.XS);
+    }
+  }
+  private isBreakpointSM = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
+    if (mediaQueryResult.matches) {
+      this.updateCurrentBreakpoint(Const.SM);
+    }
+  }
+  private isBreakpointMD = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
+    if (mediaQueryResult.matches) {
+      this.updateCurrentBreakpoint(Const.MD);
+    }
+  }
+  private isBreakpointLG = (mediaQueryResult: mediaQuery.MediaQueryResult) => {
+    if (mediaQueryResult.matches) {
+      this.updateCurrentBreakpoint(Const.LG);
+    }
+  }
+
+  public register() {
+    this.xsListener = mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_1);
+    this.xsListener.on('change', this.isBreakpointXS);
+
+    this.smListener = mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_2);
+    this.smListener.on('change', this.isBreakpointSM);
+
+    this.mdListener = mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_3);
+    this.mdListener.on('change', this.isBreakpointMD);
+
+    this.lgListener = mediaQuery.matchMediaSync(Const.BREAKPOINTS_SCOPE_4);
+    this.lgListener.on('change', this.isBreakpointLG);
+  }
+
+  private updateCurrentBreakpoint(breakpoint: string) {
+    if (this.currentBreakpoint !== breakpoint) {
+      this.currentBreakpoint = breakpoint;
+      AppStorage.set<string>('currentBreakpoint', this.currentBreakpoint);
+    }
+  }
+
+  public unregister() {
+    this.xsListener.off('change', this.isBreakpointXS);
+    this.smListener.off('change', this.isBreakpointSM);
+    this.mdListener.off('change', this.isBreakpointMD);
+    this.lgListener.off('change', this.isBreakpointLG);
+  }
+}

entry/src/main/resources/base/element/color.json

@@ -3,6 +3,10 @@
     {
       "name": "start_window_background",
       "value": "#FFFFFF"
+    },
+    {
+      "name": "bg_gray",
+      "value": "#DDDDDD"
     }
   ]
 }

entry/src/main/resources/base/element/string.json

@@ -11,6 +11,22 @@
     {
       "name": "EntryAbility_label",
       "value": "label"
+    },
+    {
+      "name": "main_page_padding1",
+      "value": "8"
+    },
+    {
+      "name": "main_page_padding2",
+      "value": "16"
+    },
+    {
+      "name": "main_page_padding3",
+      "value": "32"
+    },
+    {
+      "name": "main_page_padding4",
+      "value": "64"
     }
   ]
 }

entry/src/main/resources/en_US/element/string.json

@@ -11,6 +11,22 @@
     {
       "name": "EntryAbility_label",
       "value": "label"
+    },
+    {
+      "name": "main_page_padding1",
+      "value": "8"
+    },
+    {
+      "name": "main_page_padding2",
+      "value": "16"
+    },
+    {
+      "name": "main_page_padding3",
+      "value": "32"
+    },
+    {
+      "name": "main_page_padding4",
+      "value": "64"
     }
   ]
 }

entry/src/main/resources/zh_CN/element/string.json

@@ -11,6 +11,22 @@
     {
       "name": "EntryAbility_label",
       "value": "label"
+    },
+    {
+      "name": "main_page_padding1",
+      "value": "8"
+    },
+    {
+      "name": "main_page_padding2",
+      "value": "16"
+    },
+    {
+      "name": "main_page_padding3",
+      "value": "32"
+    },
+    {
+      "name": "main_page_padding4",
+      "value": "64"
     }
   ]
 }

oh-package.json5

@@ -1,13 +1,12 @@
 {
-  "name": "template-responsive",
-  "version": "1.0.0",
-  "description": "Please describe the basic information.",
-  "main": "",
-  "author": "",
   "license": "",
-  "dependencies": {
-  },
   "devDependencies": {
     "@ohos/hypium": "1.0.6"
-  }
+  },
+  "author": "",
+  "name": "template-responsive",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "version": "1.0.0",
+  "dependencies": {}
 }