From 3490b7ab8d4c50fb7d78883b781364b0aa5c8baf Mon Sep 17 00:00:00 2001 From: swx1239486 Date: Tue, 5 Sep 2023 11:16:16 +0800 Subject: [PATCH] =?UTF-8?q?akrTs=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: swx1239486 --- .idea/.gitignore | 3 + .idea/docs.iml | 9 ++ .idea/libraries/OpenHarmony_UX_V1_0.xml | 9 ++ .idea/libraries/figures.xml | 10 ++ .idea/misc.xml | 6 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + .../key-features/multi-device-app-dev/faq.md | 3 +- .../multi-device-app-dev/responsive-layout.md | 137 ++++++++++-------- 9 files changed, 131 insertions(+), 60 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/docs.iml create mode 100644 .idea/libraries/OpenHarmony_UX_V1_0.xml create mode 100644 .idea/libraries/figures.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000000..26d33521af --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ +# Default ignored files +/shelf/ +/workspace.xml diff --git a/.idea/docs.iml b/.idea/docs.iml new file mode 100644 index 0000000000..d6ebd48059 --- /dev/null +++ b/.idea/docs.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/libraries/OpenHarmony_UX_V1_0.xml b/.idea/libraries/OpenHarmony_UX_V1_0.xml new file mode 100644 index 0000000000..bd64c5c6f9 --- /dev/null +++ b/.idea/libraries/OpenHarmony_UX_V1_0.xml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/libraries/figures.xml b/.idea/libraries/figures.xml new file mode 100644 index 0000000000..1a3eacfbae --- /dev/null +++ b/.idea/libraries/figures.xml @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000000..639900d13c --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000000..6049cfe013 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000000..35eb1ddfbb --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/faq.md b/zh-cn/application-dev/key-features/multi-device-app-dev/faq.md index 8823fbbb79..695c83f936 100644 --- a/zh-cn/application-dev/key-features/multi-device-app-dev/faq.md +++ b/zh-cn/application-dev/key-features/multi-device-app-dev/faq.md @@ -96,6 +96,7 @@ launchType字段配置为specified时，系统会根据AbilityStage的onAcceptWa // MyAbilityStage.ts import AbilityStage from "@ohos.app.ability.AbilityStage" import deviceInfo from'@ohos.deviceInfo' +import Want from '@ohos.app.ability.Want' export default class MyAbilityStage extends AbilityStage { ... @@ -107,7 +108,7 @@ export default class MyAbilityStage extends AbilityStage { // 如果不是平板，直接以设备类型作为key，每次启动的key相同 return deviceInfo.deviceType } - onAcceptWant(want) { + onAcceptWant(want: Want) : string{ return this.generateKey() } } diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md b/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md index 83b16dfed2..6da55b1e78 100644 --- a/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md +++ b/zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md @@ -52,15 +52,16 @@ ```ts // MainAbility.ts - import window from '@ohos.window' + import type window from '@ohos.window' import display from '@ohos.display' + import Ability from '@ohos.app.ability.Ability' export default class MainAbility extends Ability { private windowObj: window.Window private curBp: string - ... + //... // 根据当前窗口尺寸更新断点 - private updateBreakpoint(windowWidth) { + private updateBreakpoint(windowWidth) :void{ // 将长度的单位由px换算为vp let windowWidthVp = windowWidth / (display.getDefaultDisplaySync().densityDPI / 160) let newBp: string = '' @@ -80,7 +81,7 @@ } } - onWindowStageCreate(windowStage: window.WindowStage) { + onWindowStageCreate(windowStage: window.WindowStage) :void{ windowStage.getMainWindow().then((windowObj) => { this.windowObj = windowObj // 获取应用启动时的窗口尺寸 @@ -90,16 +91,16 @@ this.updateBreakpoint(windowSize.width) }) }); - ... + // ... } // 窗口销毁时，取消窗口尺寸变化监听 - onWindowStageDestroy() { + onWindowStageDestroy() :void{ if (this.windowObj) { this.windowObj.off('windowSizeChange') } } - ... + //... } ``` @@ -165,7 +166,7 @@ export class BreakpointType { this.md = md this.lg = lg } - GetValue(currentBreakpoint: string) { + GetValue(currentBreakpoint: string):T { if (currentBreakpoint === 'sm') { return this.sm } @@ -185,29 +186,29 @@ export class BreakpointSystem { private mdListener: mediaquery.MediaQueryListener private lgListener: mediaquery.MediaQueryListener - private updateCurrentBreakpoint(breakpoint: string) { + private updateCurrentBreakpoint(breakpoint: string) :void{ if (this.currentBreakpoint !== breakpoint) { this.currentBreakpoint = breakpoint AppStorage.Set('currentBreakpoint', this.currentBreakpoint) } } - private isBreakpointSM = (mediaQueryResult) => { + private isBreakpointSM = (mediaQueryResult:mediaquery.MediaQueryResult) :void=> { if (mediaQueryResult.matches) { this.updateCurrentBreakpoint('sm') } } - private isBreakpointMD = (mediaQueryResult) => { + private isBreakpointMD = (mediaQueryResult:mediaquery.MediaQueryResult) :void=> { if (mediaQueryResult.matches) { this.updateCurrentBreakpoint('md') } } - private isBreakpointLG = (mediaQueryResult) => { + private isBreakpointLG = (mediaQueryResult:mediaquery.MediaQueryResult):void => { if (mediaQueryResult.matches) { this.updateCurrentBreakpoint('lg') } } - public register() { + public register() :void{ this.smListener = mediaquery.matchMediaSync("(320vp{ + ForEach(this.bgColors, (bgColor:ResourceColor)=>{ GridCol({span: {sm: 2, md: 2, lg: 2}}) { Row().backgroundColor(bgColor).height(30).width('100%') } @@ -538,21 +539,25 @@ struct GridRowSample4 { ```ts +class Obj { + public index: number = 1; + public color: Resource = $r('sys.color.ohos_id_color_palette_aux1') +} @Entry @Component struct GridRowSample5 { - private elements: Object[] = [ - {'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, - {'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, - {'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, - {'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, - {'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, - {'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, + private elements: Obj[] = [ + {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')}, + {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')}, + {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')}, + {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')}, + {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')}, + {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')}, ] build() { GridRow() { - ForEach(this.elements, (item)=>{ + ForEach(this.elements, (item:Obj)=>{ GridCol({span: {sm: 6, md: (item.index % 3 === 0) ? 0 : 4, lg: 3}}) { Row() { Text('' + item.index).fontSize(24) @@ -580,21 +585,25 @@ struct GridRowSample5 { ```ts +class Obj { + public index: number = 1; + public color: Resource = $r('sys.color.ohos_id_color_palette_aux1') +} @Entry @Component struct GridRowSample6 { - private elements: Object[] = [ - {'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, - {'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, - {'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, - {'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, - {'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, - {'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, + private elements: Obj[] = [ + {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')}, + {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')}, + {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')}, + {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')}, + {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')}, + {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')}, ] build() { GridRow() { - ForEach(this.elements, (item)=>{ + ForEach(this.elements, (item:Obj)=>{ GridCol({span: {sm: 6, md: 4, lg: 3}, offset: {sm: 0, md: 2, lg: 1} }) { Row() { Text('' + item.index).fontSize(24) @@ -622,21 +631,25 @@ struct GridRowSample6 { ```ts +class Obj { + public index: number = 1; + public color: Resource = $r('sys.color.ohos_id_color_palette_aux1') +} @Entry @Component struct GridRowSample7 { - private elements: Object[] = [ - {'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, - {'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, - {'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, - {'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, - {'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, - {'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, + private elements: Obj[] = [ + {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')}, + {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')}, + {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')}, + {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')}, + {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')}, + {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')}, ] build() { GridRow() { - ForEach(this.elements, (item)=>{ + ForEach(this.elements, (item:Obj)=>{ GridCol({span: {sm: 6, md: 4, lg: 3}, order: {lg: (6-item.index)}}) { Row() { Text('' + item.index).fontSize(24) @@ -664,21 +677,24 @@ struct GridRowSample7 { ```ts +class Obj { + public index: number = 1; + public color: Resource = $r('sys.color.ohos_id_color_palette_aux1') +} @Entry @Component struct GridRowSample8 { - private elements: Object[] = [ - {'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, - {'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, - {'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, - {'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, - {'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, - {'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, + private elements: Obj[] = [ + {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')}, + {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')}, + {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')}, + {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')}, + {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')}, + {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')}, ] - build() { GridRow() { - ForEach(this.elements, (item)=>{ + ForEach(this.elements, (item:Obj)=>{ // 不配置md断点下三个参数的值，则其取值与sm断点相同 GridCol({span: {sm:4, lg: 3}, offset: {sm: 2, lg: 1}, order: {sm: (6-item.index), lg: item.index}}) { @@ -707,23 +723,26 @@ struct GridRowSample8 { ```ts +class Obj { + public index: number = 1; + public color: Resource = $r('sys.color.ohos_id_color_palette_aux1') +} @Entry @Component struct GridRowSample9 { - private elements: Object[] = [ - {'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, - {'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, - {'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, - {'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, - {'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, - {'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, + private elements: Obj[] = [ + {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')}, + {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')}, + {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')}, + {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')}, + {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')}, + {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')}, ] - build() { GridRow() { GridCol({span: {sm: 12, md: 10, lg: 8}, offset: {sm: 0, md: 1, lg: 2}}) { GridRow() { - ForEach(this.elements, (item)=>{ + ForEach(this.elements, (item:Obj)=>{ GridCol({span: {sm: 6, md: 4, lg: 3}}) { Row() { Text('' + item.index).fontSize(24) -- GitLab