Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 3490b7ab 编写于 作者: S swx1239486
浏览文件
操作

akrTs完善 

Signed-off-by: Nswx1239486 <songqinqin4@huawei.com>
上级 773031fc
隐藏空白更改
内联 并排
Showing with 131 addition and 60 deletion
.idea/.gitignore 0 → 100644
浏览文件 @ 3490b7ab
# Default ignored files
/shelf/
/workspace.xml
.idea/docs.iml 0 → 100644
浏览文件 @ 3490b7ab
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/libraries/OpenHarmony_UX_V1_0.xml 0 → 100644
浏览文件 @ 3490b7ab
<component name="libraryTable">
<library name="OpenHarmony_天气应用UX设计交付件_V1.0">
<CLASSES>
<root url="jar://$PROJECT_DIR$/zh-cn/application-dev/key-features/multi-device-app-dev/OpenHarmony_天气应用UX设计交付件_V1.0.zip!/" />
</CLASSES>
<JAVADOC />
<SOURCES />
</library>
</component>
\ No newline at end of file
.idea/libraries/figures.xml 0 → 100644
浏览文件 @ 3490b7ab
<component name="libraryTable">
<library name="figures">
<CLASSES>
<root url="jar://$PROJECT_DIR$/zh-cn/design/ux-design/figures/OpenHarmony应用图标模版.zip!/" />
<root url="jar://$PROJECT_DIR$/zh-cn/design/ux-design/figures/OpenHarmony_Icons.zip!/" />
</CLASSES>
<JAVADOC />
<SOURCES />
</library>
</component>
\ No newline at end of file
.idea/misc.xml 0 → 100644
浏览文件 @ 3490b7ab
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
浏览文件 @ 3490b7ab
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/docs.iml" filepath="$PROJECT_DIR$/.idea/docs.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
浏览文件 @ 3490b7ab
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>
\ No newline at end of file
zh-cn/application-dev/key-features/multi-device-app-dev/faq.md
浏览文件 @ 3490b7ab
...@@ -96,6 +96,7 @@ launchType字段配置为specified时，系统会根据AbilityStage的onAcceptWa ...@@ -96,6 +96,7 @@ launchType字段配置为specified时，系统会根据AbilityStage的onAcceptWa
// MyAbilityStage.ts // MyAbilityStage.ts
import AbilityStage from "@ohos.app.ability.AbilityStage" import AbilityStage from "@ohos.app.ability.AbilityStage"
import deviceInfo from'@ohos.deviceInfo' import deviceInfo from'@ohos.deviceInfo'
import Want from '@ohos.app.ability.Want'
export default class MyAbilityStage extends AbilityStage { export default class MyAbilityStage extends AbilityStage {
... ...
...@@ -107,7 +108,7 @@ export default class MyAbilityStage extends AbilityStage { ...@@ -107,7 +108,7 @@ export default class MyAbilityStage extends AbilityStage {
// 如果不是平板，直接以设备类型作为key，每次启动的key相同 // 如果不是平板，直接以设备类型作为key，每次启动的key相同
return deviceInfo.deviceType return deviceInfo.deviceType
} }
onAcceptWant(want) { onAcceptWant(want: Want) : string{
return this.generateKey() return this.generateKey()
} }
} }
......
zh-cn/application-dev/key-features/multi-device-app-dev/responsive-layout.md
浏览文件 @ 3490b7ab
...@@ -52,15 +52,16 @@ ...@@ -52,15 +52,16 @@
```ts ```ts
// MainAbility.ts // MainAbility.ts
import window from '@ohos.window' import type window from '@ohos.window'
import display from '@ohos.display' import display from '@ohos.display'
import Ability from '@ohos.app.ability.Ability'
export default class MainAbility extends Ability { export default class MainAbility extends Ability {
private windowObj: window.Window private windowObj: window.Window
private curBp: string private curBp: string
... //...
// 根据当前窗口尺寸更新断点 // 根据当前窗口尺寸更新断点
private updateBreakpoint(windowWidth) { private updateBreakpoint(windowWidth) :void{
// 将长度的单位由px换算为vp // 将长度的单位由px换算为vp
let windowWidthVp = windowWidth / (display.getDefaultDisplaySync().densityDPI / 160) let windowWidthVp = windowWidth / (display.getDefaultDisplaySync().densityDPI / 160)
let newBp: string = '' let newBp: string = ''
...@@ -80,7 +81,7 @@ ...@@ -80,7 +81,7 @@
} }
} }
onWindowStageCreate(windowStage: window.WindowStage) { onWindowStageCreate(windowStage: window.WindowStage) :void{
windowStage.getMainWindow().then((windowObj) => { windowStage.getMainWindow().then((windowObj) => {
this.windowObj = windowObj this.windowObj = windowObj
// 获取应用启动时的窗口尺寸 // 获取应用启动时的窗口尺寸
...@@ -90,16 +91,16 @@ ...@@ -90,16 +91,16 @@
this.updateBreakpoint(windowSize.width) this.updateBreakpoint(windowSize.width)
}) })
}); });
... // ...
} }
// 窗口销毁时，取消窗口尺寸变化监听 // 窗口销毁时，取消窗口尺寸变化监听
onWindowStageDestroy() { onWindowStageDestroy() :void{
if (this.windowObj) { if (this.windowObj) {
this.windowObj.off('windowSizeChange') this.windowObj.off('windowSizeChange')
} }
} }
... //...
} }
``` ```
...@@ -165,7 +166,7 @@ export class BreakpointType<T> { ...@@ -165,7 +166,7 @@ export class BreakpointType<T> {
this.md = md this.md = md
this.lg = lg this.lg = lg
} }
GetValue(currentBreakpoint: string) { GetValue(currentBreakpoint: string):T {
if (currentBreakpoint === 'sm') { if (currentBreakpoint === 'sm') {
return this.sm return this.sm
} }
...@@ -185,29 +186,29 @@ export class BreakpointSystem { ...@@ -185,29 +186,29 @@ export class BreakpointSystem {
private mdListener: mediaquery.MediaQueryListener private mdListener: mediaquery.MediaQueryListener
private lgListener: mediaquery.MediaQueryListener private lgListener: mediaquery.MediaQueryListener
private updateCurrentBreakpoint(breakpoint: string) { private updateCurrentBreakpoint(breakpoint: string) :void{
if (this.currentBreakpoint !== breakpoint) { if (this.currentBreakpoint !== breakpoint) {
this.currentBreakpoint = breakpoint this.currentBreakpoint = breakpoint
AppStorage.Set<string>('currentBreakpoint', this.currentBreakpoint) AppStorage.Set<string>('currentBreakpoint', this.currentBreakpoint)
} }
} }
private isBreakpointSM = (mediaQueryResult) => { private isBreakpointSM = (mediaQueryResult:mediaquery.MediaQueryResult) :void=> {
if (mediaQueryResult.matches) { if (mediaQueryResult.matches) {
this.updateCurrentBreakpoint('sm') this.updateCurrentBreakpoint('sm')
} }
} }
private isBreakpointMD = (mediaQueryResult) => { private isBreakpointMD = (mediaQueryResult:mediaquery.MediaQueryResult) :void=> {
if (mediaQueryResult.matches) { if (mediaQueryResult.matches) {
this.updateCurrentBreakpoint('md') this.updateCurrentBreakpoint('md')
} }
} }
private isBreakpointLG = (mediaQueryResult) => { private isBreakpointLG = (mediaQueryResult:mediaquery.MediaQueryResult):void => {
if (mediaQueryResult.matches) { if (mediaQueryResult.matches) {
this.updateCurrentBreakpoint('lg') this.updateCurrentBreakpoint('lg')
} }
} }
public register() { public register() :void{
this.smListener = mediaquery.matchMediaSync("(320vp<width<600vp)") this.smListener = mediaquery.matchMediaSync("(320vp<width<600vp)")
//初始化 //初始化
if (this.smListener.matches){ if (this.smListener.matches){
...@@ -215,20 +216,20 @@ export class BreakpointSystem { ...@@ -215,20 +216,20 @@ export class BreakpointSystem {
} }
this.smListener.on("change", this.isBreakpointSM) this.smListener.on("change", this.isBreakpointSM)
this.mdListener = mediaquery.matchMediaSync("(600vp<width<840vp)") this.mdListener = mediaquery.matchMediaSync("(600vp<width<840vp)")
//初始化 //初始化
if (this.mdListener.matches){ if (this.mdListener.matches){
this.updateCurrentBreakpoint('md') this.updateCurrentBreakpoint('md')
} }
this.mdListener.on("change", this.isBreakpointMD) this.mdListener.on("change", this.isBreakpointMD)
this.lgListener = mediaquery.matchMediaSync("(840vp<width)") this.lgListener = mediaquery.matchMediaSync("(840vp<width)")
//初始化 //初始化
if (this.lgListener.matches){ if (this.lgListener.matches){
this.updateCurrentBreakpoint('lg') this.updateCurrentBreakpoint('lg')
} }
this.lgListener.on("change", this.isBreakpointLG) this.lgListener.on("change", this.isBreakpointLG)
} }
public unregister() { public unregister() :void{
this.smListener.off("change", this.isBreakpointSM) this.smListener.off("change", this.isBreakpointSM)
this.mdListener.off("change", this.isBreakpointMD) this.mdListener.off("change", this.isBreakpointMD)
this.lgListener.off("change", this.isBreakpointLG) this.lgListener.off("change", this.isBreakpointLG)
...@@ -441,7 +442,7 @@ struct GridRowSample3 { ...@@ -441,7 +442,7 @@ struct GridRowSample3 {
// 配置不同断点下columns和gutter的取值 // 配置不同断点下columns和gutter的取值
GridRow({columns: {sm: 4, md: 8, lg: 12}, GridRow({columns: {sm: 4, md: 8, lg: 12},
gutter: {x: {sm: 8, md: 16, lg: 24}, y: {sm: 8, md: 16, lg: 24}}}) { gutter: {x: {sm: 8, md: 16, lg: 24}, y: {sm: 8, md: 16, lg: 24}}}) {
ForEach(this.bgColors, (bgColor)=>{ ForEach(this.bgColors, (bgColor:ResourceColor)=>{
GridCol({span: {sm: 2, md: 2, lg: 2}}) { GridCol({span: {sm: 2, md: 2, lg: 2}}) {
Row().backgroundColor(bgColor).height(30).width('100%') Row().backgroundColor(bgColor).height(30).width('100%')
} }
...@@ -538,21 +539,25 @@ struct GridRowSample4 { ...@@ -538,21 +539,25 @@ struct GridRowSample4 {
```ts ```ts
class Obj {
public index: number = 1;
public color: Resource = $r('sys.color.ohos_id_color_palette_aux1')
}
@Entry @Entry
@Component @Component
struct GridRowSample5 { struct GridRowSample5 {
private elements: Object[] = [ private elements: Obj[] = [
{'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')},
{'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')},
{'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')},
{'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')},
{'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')},
{'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')},
] ]
build() { build() {
GridRow() { GridRow() {
ForEach(this.elements, (item)=>{ ForEach(this.elements, (item:Obj)=>{
GridCol({span: {sm: 6, md: (item.index % 3 === 0) ? 0 : 4, lg: 3}}) { GridCol({span: {sm: 6, md: (item.index % 3 === 0) ? 0 : 4, lg: 3}}) {
Row() { Row() {
Text('' + item.index).fontSize(24) Text('' + item.index).fontSize(24)
...@@ -580,21 +585,25 @@ struct GridRowSample5 { ...@@ -580,21 +585,25 @@ struct GridRowSample5 {
```ts ```ts
class Obj {
public index: number = 1;
public color: Resource = $r('sys.color.ohos_id_color_palette_aux1')
}
@Entry @Entry
@Component @Component
struct GridRowSample6 { struct GridRowSample6 {
private elements: Object[] = [ private elements: Obj[] = [
{'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')},
{'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')},
{'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')},
{'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')},
{'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')},
{'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')},
] ]
build() { build() {
GridRow() { 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} }) { GridCol({span: {sm: 6, md: 4, lg: 3}, offset: {sm: 0, md: 2, lg: 1} }) {
Row() { Row() {
Text('' + item.index).fontSize(24) Text('' + item.index).fontSize(24)
...@@ -622,21 +631,25 @@ struct GridRowSample6 { ...@@ -622,21 +631,25 @@ struct GridRowSample6 {
```ts ```ts
class Obj {
public index: number = 1;
public color: Resource = $r('sys.color.ohos_id_color_palette_aux1')
}
@Entry @Entry
@Component @Component
struct GridRowSample7 { struct GridRowSample7 {
private elements: Object[] = [ private elements: Obj[] = [
{'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')},
{'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')},
{'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')},
{'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')},
{'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')},
{'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')},
] ]
build() { build() {
GridRow() { GridRow() {
ForEach(this.elements, (item)=>{ ForEach(this.elements, (item:Obj)=>{
GridCol({span: {sm: 6, md: 4, lg: 3}, order: {lg: (6-item.index)}}) { GridCol({span: {sm: 6, md: 4, lg: 3}, order: {lg: (6-item.index)}}) {
Row() { Row() {
Text('' + item.index).fontSize(24) Text('' + item.index).fontSize(24)
...@@ -664,21 +677,24 @@ struct GridRowSample7 { ...@@ -664,21 +677,24 @@ struct GridRowSample7 {
```ts ```ts
class Obj {
public index: number = 1;
public color: Resource = $r('sys.color.ohos_id_color_palette_aux1')
}
@Entry @Entry
@Component @Component
struct GridRowSample8 { struct GridRowSample8 {
private elements: Object[] = [ private elements: Obj[] = [
{'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')},
{'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')},
{'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')},
{'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')},
{'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')},
{'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')},
] ]
build() { build() {
GridRow() { GridRow() {
ForEach(this.elements, (item)=>{ ForEach(this.elements, (item:Obj)=>{
// 不配置md断点下三个参数的值，则其取值与sm断点相同 // 不配置md断点下三个参数的值，则其取值与sm断点相同
GridCol({span: {sm:4, lg: 3}, offset: {sm: 2, lg: 1}, GridCol({span: {sm:4, lg: 3}, offset: {sm: 2, lg: 1},
order: {sm: (6-item.index), lg: item.index}}) { order: {sm: (6-item.index), lg: item.index}}) {
...@@ -707,23 +723,26 @@ struct GridRowSample8 { ...@@ -707,23 +723,26 @@ struct GridRowSample8 {
```ts ```ts
class Obj {
public index: number = 1;
public color: Resource = $r('sys.color.ohos_id_color_palette_aux1')
}
@Entry @Entry
@Component @Component
struct GridRowSample9 { struct GridRowSample9 {
private elements: Object[] = [ private elements: Obj[] = [
{'index': 1, 'color': $r('sys.color.ohos_id_color_palette_aux1')}, {index: 1, color: $r('sys.color.ohos_id_color_palette_aux1')},
{'index': 2, 'color': $r('sys.color.ohos_id_color_palette_aux2')}, {index: 2, color: $r('sys.color.ohos_id_color_palette_aux2')},
{'index': 3, 'color': $r('sys.color.ohos_id_color_palette_aux3')}, {index: 3, color: $r('sys.color.ohos_id_color_palette_aux3')},
{'index': 4, 'color': $r('sys.color.ohos_id_color_palette_aux4')}, {index: 4, color: $r('sys.color.ohos_id_color_palette_aux4')},
{'index': 5, 'color': $r('sys.color.ohos_id_color_palette_aux5')}, {index: 5, color: $r('sys.color.ohos_id_color_palette_aux5')},
{'index': 6, 'color': $r('sys.color.ohos_id_color_palette_aux6')}, {index: 6, color: $r('sys.color.ohos_id_color_palette_aux6')},
] ]
build() { build() {
GridRow() { GridRow() {
GridCol({span: {sm: 12, md: 10, lg: 8}, offset: {sm: 0, md: 1, lg: 2}}) { GridCol({span: {sm: 12, md: 10, lg: 8}, offset: {sm: 0, md: 1, lg: 2}}) {
GridRow() { GridRow() {
ForEach(this.elements, (item)=>{ ForEach(this.elements, (item:Obj)=>{
GridCol({span: {sm: 6, md: 4, lg: 3}}) { GridCol({span: {sm: 6, md: 4, lg: 3}}) {
Row() { Row() {
Text('' + item.index).fontSize(24) Text('' + item.index).fontSize(24)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或