diff --git a/zh-cn/application-dev/quick-start/arkts-application-state-management-overview.md b/zh-cn/application-dev/quick-start/arkts-application-state-management-overview.md index f3bb0e45598c3aa59ae20b521eec25ba5cff8375..429cabb892d1e2edb30b3ab16ce04a7e5406ac08 100644 --- a/zh-cn/application-dev/quick-start/arkts-application-state-management-overview.md +++ b/zh-cn/application-dev/quick-start/arkts-application-state-management-overview.md @@ -4,7 +4,7 @@ 上一个章节中介绍的装饰器仅能在页面内，即一个组件树上共享状态变量。如果开发者要实现应用级的，或者多个页面的状态数据共享，就需要用到应用级别的状态管理的概念。ArkTS根据不同特性，提供了多种应用状态管理的能力： -- [LocalStorage](arkts-localstorage.md)：页面级UI状态存储，通常用于[UIAbility](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-app-ability-uiAbility.md)内、页面间的状态共享。 +- [LocalStorage](arkts-localstorage.md)：页面级UI状态存储，通常用于[UIAbility](../reference/apis/js-apis-app-ability-uiAbility.md)内、页面间的状态共享。 - [AppStorage](arkts-appstorage.md)：特殊的单例LocalStorage对象，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储； diff --git a/zh-cn/application-dev/quick-start/arkts-localstorage.md b/zh-cn/application-dev/quick-start/arkts-localstorage.md index f772506b80cfab021cc203442fbba05602e80184..ab909e4f0b7b1065fc4a26c5fb256d7c08b95911 100644 --- a/zh-cn/application-dev/quick-start/arkts-localstorage.md +++ b/zh-cn/application-dev/quick-start/arkts-localstorage.md @@ -1,7 +1,7 @@ # LocalStorage：页面级UI状态存储 -LocalStorage是页面级的UI状态存储，通过\@Entry装饰器接受的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility内，页面间共享状态。 +LocalStorage是页面级的UI状态存储，通过\@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility内，页面间共享状态。 本文仅介绍LocalStorage使用场景和相关的装饰器：\@LocalStorageProp和\@LocalStorageLink。 @@ -28,7 +28,7 @@ LocalStorage是ArkTS为构建页面级别状态变量提供存储的内存内“ LocalStorage根据与\@Component装饰的组件的同步类型不同，提供了两个装饰器： -- [@LocalStorageProp](#localstorageprop)：\@LocalStorageProp装饰的变量和与LocalStorage中给定属性建立单行同步关系。 +- [@LocalStorageProp](#localstorageprop)：\@LocalStorageProp装饰的变量和与LocalStorage中给定属性建立单向同步关系。 - [@LocalStorageLink](#localstoragelink)：\@LocalStorageLink装饰的变量和在\@Component中创建与LocalStorage中给定属性建立双向同步关系。 @@ -193,12 +193,12 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 ```ts // 创建新实例并使用给定对象初始化 let storage = new LocalStorage({ 'PropA': 47 }); - + @Component struct Child { // @LocalStorageLink变量装饰器与LocalStorage中的'ProA'属性建立双向绑定 @LocalStorageLink('PropA') storLink2: number = 1; - + build() { Button(`Child from LocalStorage ${this.storLink2}`) // 更改将同步至LocalStorage中的'ProA'以及Parent.storLink1 @@ -211,7 +211,7 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 struct CompA { // @LocalStorageLink变量装饰器与LocalStorage中的'ProA'属性建立双向绑定 @LocalStorageLink('PropA') storLink1: number = 1; - + build() { Column({ space: 15 }) { Button(`Parent from LocalStorage ${this.storLink1}`) // initial value from LocalStorage will be 47, because 'PropA' initialized already @@ -241,7 +241,7 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 struct CompA { // @LocalStorageProp变量装饰器与LocalStorage中的'ProA'属性建立单向绑定 @LocalStorageProp('PropA') storProp1: number = 1; - + build() { Column({ space: 15 }) { // 点击后从47开始加1，只改变当前组件显示的storProp1，不会同步到LocalStorage中 @@ -251,12 +251,12 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 } } } - + @Component struct Child { // @LocalStorageProp变量装饰器与LocalStorage中的'ProA'属性建立单向绑定 @LocalStorageProp('PropA') storProp2: number = 2; - + build() { Column({ space: 15 }) { // 当CompA改变时，当前storProp2不会改变，显示47 @@ -318,14 +318,14 @@ Child自定义组件中的变化： ```ts let storage = new LocalStorage({ countStorage: 1 }); - + @Component struct Child { // 子组件实例的名字 label: string = 'no name'; // 和LocalStorage中“countStorage”的双向绑定数据 @LocalStorageLink('countStorage') playCountLink: number = 0; - + build() { Row() { Text(this.label) @@ -338,12 +338,12 @@ Child自定义组件中的变化： }.width(300).height(60) } } - + @Entry(storage) @Component struct Parent { @LocalStorageLink('countStorage') playCount: number = 0; - + build() { Column() { Row() { @@ -355,7 +355,7 @@ Child自定义组件中的变化： }) .width(250).height(60).fontSize(12) }.width(300).height(60) - + Row() { Text('LocalStorage') .width(50).height(60).fontSize(12) @@ -365,10 +365,10 @@ Child自定义组件中的变化： }) .width(250).height(60).fontSize(12) }.width(300).height(60) - + Child({ label: 'ChildA' }) Child({ label: 'ChildB' }) - + Text(`playCount in LocalStorage for debug ${storage.get('countStorage')}`) .width(300).height(60).fontSize(12) } @@ -379,7 +379,7 @@ Child自定义组件中的变化： ### 将LocalStorage实例从UIAbility共享到一个或多个视图 -上面的实例中，LocalStorage的实例仅仅在一个\@Entry装饰的组件和其所属的子组件（一个页面）中共享，如果希望其在多个视图中共享，可以在所属UIAbility中创建LocalStorage实例，并调用windowStage.[loadContent](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-window.md#loadcontent9)。 +上面的实例中，LocalStorage的实例仅仅在一个\@Entry装饰的组件和其所属的子组件（一个页面）中共享，如果希望其在多个视图中共享，可以在所属UIAbility中创建LocalStorage实例，并调用windowStage.[loadContent](../reference/apis/js-apis-window.md#loadcontent9)。 ```ts diff --git a/zh-cn/application-dev/quick-start/arkts-style.md b/zh-cn/application-dev/quick-start/arkts-style.md index 8b69bb2bceb3642c0196e612104cec193503bfee..bfffc057bdc38b875b862c926910800dff460566 100644 --- a/zh-cn/application-dev/quick-start/arkts-style.md +++ b/zh-cn/application-dev/quick-start/arkts-style.md @@ -45,12 +45,12 @@ ```ts @Component struct FancyUse { - @State heightVlaue: number = 100 + @State heightValue: number = 100 @Styles fancy() { - .height(this.heightVlaue) + .height(this.heightValue) .backgroundColor(Color.Yellow) .onClick(() => { - this.heightVlaue = 200 + this.heightValue = 200 }) } } @@ -77,14 +77,14 @@ @Entry @Component struct FancyUse { - @State heightVlaue: number = 100 + @State heightValue: number = 100 // 定义在组件内的@Styles封装的样式 @Styles fancy() { .width(200) - .height(this.heightVlaue) + .height(this.heightValue) .backgroundColor(Color.Yellow) .onClick(() => { - this.heightVlaue = 200 + this.heightValue = 200 }) } diff --git a/zh-cn/application-dev/quick-start/arkts-watch.md b/zh-cn/application-dev/quick-start/arkts-watch.md index 8cee38d2db9465ada640675f0585e896dbb1abfb..dfe9e0320955b228be2d4e8283fc8a111af5df81 100644 --- a/zh-cn/application-dev/quick-start/arkts-watch.md +++ b/zh-cn/application-dev/quick-start/arkts-watch.md @@ -52,6 +52,51 @@ ## 使用场景 +### \@Watch和自定义组件更新 + +以下示例展示组件更新和\@Watch的处理步骤。count在CountModifier中由\@State装饰，在TotalView中由\@Prop装饰。 + + +```ts +@Component +struct TotalView { + @Prop @Watch('onCountUpdated') count: number; + @State total: number = 0; + // @Watch cb + onCountUpdated(propName: string): void { + this.total += this.count; + } + + build() { + Text(`Total: ${this.total}`) + } +} + +@Entry +@Component +struct CountModifier { + @State count: number = 0; + + build() { + Column() { + Button('add to basket') + .onClick(() => { + this.count++ + }) + TotalView({ count: this.count }) + } + } +} +``` + +处理步骤： + +1. CountModifier自定义组件的Button.onClick点击事件自增count。 + +2. 由于\@State count变量更改，子组件TotalView中的\@Prop被更新，其\@Watch('onCountUpdated')方法被调用，更新了子组件TotalView 中的total变量。 + +3. 子组件TotalView中的Text重新渲染。 + ### \@Watch与\@Link组合使用 @@ -124,52 +169,7 @@ struct BasketModifier { 2. \@Link装饰的BasketViewer shopBasket值发生变化； -3. 状态管理框架调用\@Watch函数BasketViewer onBasketUpdated 更新BaketViewer TotalPurchase的值； +3. 状态管理框架调用\@Watch函数BasketViewer onBasketUpdated 更新BasketViewer TotalPurchase的值； 4. \@Link shopBasket的改变，新增了数组项，ForEach组件会执行item Builder，渲染构建新的Item项；\@State totalPurchase改变，对应的Text组件也重新渲染；重新渲染是异步发生的。 - -### \@Watch和自定义组件更新 - -以下示例展示组件更新和\@Watch的处理步骤。count在CountModifier中由\@State装饰，在TotalView中由\@Prop装饰。 - - -```ts -@Component -struct TotalView { - @Prop @Watch('onCountUpdated') count: number; - @State total: number = 0; - // @Watch cb - onCountUpdated(propName: string): void { - this.total += this.count; - } - - build() { - Text(`Total: ${this.total}`) - } -} - -@Entry -@Component -struct CountModifier { - @State count: number = 0; - - build() { - Column() { - Button('add to basket') - .onClick(() => { - this.count++ - }) - TotalView({ count: this.count }) - } - } -} -``` - -处理步骤： - -1. CountModifier自定义组件的Button.onClick点击事件自增count。 - -2. 由于\@State count变量更改，子组件TotalView中的\@Prop被更新，其\@Watch('onCountUpdated')方法被调用，更新了子组件TotalView 中的total变量。 - -3. 子组件TotalView中的Text重新渲染。 diff --git a/zh-cn/application-dev/ui/arkts-common-components-xcomponent.md b/zh-cn/application-dev/ui/arkts-common-components-xcomponent.md index d503763d71618f8bbfbc742048eae2727d9e2fbd..e9af33da20b07741bd88e8a900e84d527782a70c 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-xcomponent.md +++ b/zh-cn/application-dev/ui/arkts-common-components-xcomponent.md @@ -221,7 +221,7 @@ XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' } XComponent所持有的Surface符合“生产者-消费者”模型 -OpenHarmony上Camera、VideoPlayer等符合生产者设计的部件都可以将数据写入XComponent持有的surface并通过XComponent显示。 +OpenHarmony上Camera、AVPlayer等符合生产者设计的部件都可以将数据写入XComponent持有的surface并通过XComponent显示。 ![图片1](figures/图片1.png) diff --git a/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md b/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md index 83ab369bf4273c8369d8ab3581057f7b8336cb7d..495708ec86e4bd20cf936087f362c4d11dadff6f 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-create-grid.md @@ -269,7 +269,7 @@ struct Shopping { ![zh-cn_image_0000001562940549](figures/zh-cn_image_0000001562940549.gif) -Grid组件初始化时，可以绑定一个[Scroller](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md/#scroller)对象，用于进行滚动控制，例如通过Scroller对象的[scrollPage](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md/#scrollpage)方法进行翻页。 +Grid组件初始化时，可以绑定一个[Scroller](../reference/arkui-ts/ts-container-scroll.md#scroller)对象，用于进行滚动控制，例如通过Scroller对象的[scrollPage](../application-dev/reference/arkui-ts/ts-container-scroll.md#scrollpage)方法进行翻页。 ```ts diff --git a/zh-cn/application-dev/ui/arkts-layout-development-media-query.md b/zh-cn/application-dev/ui/arkts-layout-development-media-query.md index 399b02c501fe122d52b2e12b1963b4a068ac8662..5f04ae2ed923fb28b78271c291a6492f9f137430 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-media-query.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-media-query.md @@ -3,7 +3,7 @@ ## 概述 -[媒体查询](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/apis/js-apis-mediaquery.md/)作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。媒体查询常用于下面两种场景： +[媒体查询](../reference/apis/js-apis-mediaquery.md)作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。媒体查询常用于下面两种场景： 1. 针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。 diff --git a/zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md b/zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md index c18957fc88548f0640bb80619db8028e3cd1f610..6db0b3d1153d0336cbe6cd13a705d8bf8c15c7fe 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-stack-layout.md @@ -3,7 +3,7 @@ ## 概述 -层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过[Stack](https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md/)容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。 +层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过[Stack](../reference/arkui-ts/ts-container-stack.md)容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。 层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。 diff --git "a/zh-cn/application-dev/ui/figures/\345\233\276\347\211\2071.png" "b/zh-cn/application-dev/ui/figures/\345\233\276\347\211\2071.png" index 47750ee238fc411f26ed86d99d2f554d3f185b64..a62ead63d373a59ba94afc64e856c6603d1f3e3a 100644 Binary files "a/zh-cn/application-dev/ui/figures/\345\233\276\347\211\2071.png" and "b/zh-cn/application-dev/ui/figures/\345\233\276\347\211\2071.png" differ