clz/harmony-responsive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Feat: finish break point

Browse Source
This commit is contained in:
cheliangzhao 2023-10-08 17:34:27 +08:00
parent d40c607ef6
commit 0f7dc9fdc8
11 changed files with 218 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build-profile.json5
View File

@ -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",

8
entry/oh-package.json5
View File

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

14
entry/src/main/ets/constants/CommonConstants.ets Normal file
View File

@ -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)';
}

2
entry/src/main/ets/entryability/EntryAbility.ets
View File

@ -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;

69
entry/src/main/ets/pages/Index.ets
View File

@ -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() {
Column() {
Row() {
Text(this.message)
Text(this.currentBreakpoint)
.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%')
.justifyContent(FlexAlign.Center)
.backgroundColor($r('app.color.bg_gray'))
}
}
@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'))
}
}

58
entry/src/main/ets/utils/BreakpointSystem.ets Normal file
View File

@ -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);
}
}

4
entry/src/main/resources/base/element/color.json
View File

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

16
entry/src/main/resources/base/element/string.json
View File

@ -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"
}
]
}

16
entry/src/main/resources/en_US/element/string.json
View File

@ -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"
}
]
}

16
entry/src/main/resources/zh_CN/element/string.json
View File

@ -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"
}
]
}

15
oh-package.json5
View File

@ -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": {}
}