Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 2bd88a14 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!23751 翻译完成 23560+23226+22441+22374+23534+23601+23246+23585+23567+23667+23643+23202+22676：文档整改 

Merge pull request !23751 from ester.zhou/TR-22441
上级 7adfec7c 6d4d84f3
显示空白变更内容
内联 并排
Showing with 850 addition and 489 deletion
en/application-dev/quick-start/arkts-animatable-extend.md
浏览文件 @ 2bd88a14
...@@ -101,7 +101,7 @@ class PointVector extends Array<Point> implements AnimatableArithmetic<PointVect ...@@ -101,7 +101,7 @@ class PointVector extends Array<Point> implements AnimatableArithmetic<PointVect
let result = new PointVector([]) let result = new PointVector([])
const len = Math.min(this.length, rhs.length) const len = Math.min(this.length, rhs.length)
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
result.push(this[i].plus(rhs[i])) result.push((this as Array<Point>)[i].plus((rhs as Array<Point>)[i]))
} }
return result return result
} }
...@@ -109,14 +109,14 @@ class PointVector extends Array<Point> implements AnimatableArithmetic<PointVect ...@@ -109,14 +109,14 @@ class PointVector extends Array<Point> implements AnimatableArithmetic<PointVect
let result = new PointVector([]) let result = new PointVector([])
const len = Math.min(this.length, rhs.length) const len = Math.min(this.length, rhs.length)
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
result.push(this[i].subtract(rhs[i])) result.push((this as Array<Point>)[i].subtract((rhs as Array<Point>)[i]))
} }
return result return result
} }
multiply(scale: number): PointVector { multiply(scale: number): PointVector {
let result = new PointVector([]) let result = new PointVector([])
for (let i = 0; i < this.length; i++) { for (let i = 0; i < this.length; i++) {
result.push(this[i].multiply(scale)) result.push((this as Array<Point>)[i].multiply(scale))
} }
return result return result
} }
...@@ -125,14 +125,14 @@ class PointVector extends Array<Point> implements AnimatableArithmetic<PointVect ...@@ -125,14 +125,14 @@ class PointVector extends Array<Point> implements AnimatableArithmetic<PointVect
return false return false
} }
for (let i = 0; i < this.length; i++) { for (let i = 0; i < this.length; i++) {
if (!this[i].equals(rhs[i])) { if (!(this as Array<Point>)[i].equals((rhs as Array<Point>)[i])) {
return false return false
} }
} }
return true return true
} }
get():Array<[x: number, y: number]> { get(): Array<Object[]> {
let result = [] let result: Array<Object[]> = []
this.forEach(p => result.push([p.x, p.y])) this.forEach(p => result.push([p.x, p.y]))
return result return result
} }
......
en/application-dev/quick-start/arkts-appstorage.md
浏览文件 @ 2bd88a14
...@@ -142,23 +142,24 @@ Since AppStorage is a singleton, its APIs are all static ones. How these APIs wo ...@@ -142,23 +142,24 @@ Since AppStorage is a singleton, its APIs are all static ones. How these APIs wo
```ts ```ts
AppStorage.SetOrCreate('PropA', 47); AppStorage.setOrCreate('PropA', 47);
let storage: LocalStorage = new LocalStorage({ 'PropA': 17 }); let storage: LocalStorage = new LocalStorage();
let propA: number = AppStorage.Get('PropA') // propA in AppStorage == 47, propA in LocalStorage == 17 storage['PropA'] = 17;
var link1: SubscribedAbstractProperty<number> = AppStorage.Link('PropA'); // link1.get() == 47 let propA: number | undefined = AppStorage.get('PropA') // propA in AppStorage == 47, propA in LocalStorage == 17
var link2: SubscribedAbstractProperty<number> = AppStorage.Link('PropA'); // link2.get() == 47 let link1: SubscribedAbstractProperty<number> = AppStorage.link('PropA'); // link1.get() == 47
var prop: SubscribedAbstractProperty<number> = AppStorage.Prop('PropA'); // prop.get() = 47 let link2: SubscribedAbstractProperty<number> = AppStorage.link('PropA'); // link2.get() == 47
let prop: SubscribedAbstractProperty<number> = AppStorage.prop('PropA'); // prop.get() = 47
link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48 link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48 prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48
link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
storage.get('PropA') // == 17 storage.get<number>('PropA') // == 17
storage.set('PropA', 101); storage.set('PropA', 101);
storage.get('PropA') // == 101 storage.get<number>('PropA') // == 101
AppStorage.Get('PropA') // == 49 AppStorage.get<number>('PropA') // == 49
link1.get() // == 49 link1.get() // == 49
link2.get() // == 49 link2.get() // == 49
prop.get() // == 49 prop.get() // == 49
...@@ -171,8 +172,9 @@ prop.get() // == 49 ...@@ -171,8 +172,9 @@ prop.get() // == 49
```ts ```ts
AppStorage.SetOrCreate('PropA', 47); AppStorage.setOrCreate('PropA', 47);
let storage = new LocalStorage({ 'PropA': 48 }); let storage = new LocalStorage();
storage['PropA'] = 48;
@Entry(storage) @Entry(storage)
@Component @Component
...@@ -196,7 +198,7 @@ struct CompA { ...@@ -196,7 +198,7 @@ struct CompA {
Compared with the common mechanism for event notification, the two-way synchronization mechanism of @StorageLink and AppStorage is far less cost efficient and therefore not recommended. This is because AppStorage stores UI-related data, and its changes will cause costly UI refresh. Compared with the common mechanism for event notification, the two-way synchronization mechanism of @StorageLink and AppStorage is far less cost efficient and therefore not recommended. This is because AppStorage stores UI-related data, and its changes will cause costly UI refresh.
In the following example, any tap event in the **TapImage** component will trigger a change of the **tapIndex** attribute. As @StorageLink establishes a two-way data synchronization with AppStorage, the local change is synchronized to AppStorage. As a result, all visible custom components owning the **tapIndex** attribute bound to AppStorage are notified to refresh the UI. In the following example, any tap event in the **TapImage** component will trigger a change of the **tapIndex** attribute. As @StorageLink establishes a two-way data synchronization with AppStorage, the local change is synchronized to AppStorage. As a result, all custom components owning the **tapIndex** attribute bound to AppStorage are notified to refresh the UI.
```ts ```ts
...@@ -242,8 +244,13 @@ struct Gallery2 { ...@@ -242,8 +244,13 @@ struct Gallery2 {
export struct TapImage { export struct TapImage {
@StorageLink('tapIndex') @Watch('onTapIndexChange') tapIndex: number = -1; @StorageLink('tapIndex') @Watch('onTapIndexChange') tapIndex: number = -1;
@State tapColor: Color = Color.Black; @State tapColor: Color = Color.Black;
private index: number; private index: number = 0;
private uri: Resource; private uri: Resource = {
id: 0,
type: 0,
moduleName: "",
bundleName: ""
};
// Check whether the component is selected. // Check whether the component is selected.
onTapIndexChange() { onTapIndexChange() {
...@@ -313,9 +320,9 @@ struct Gallery2 { ...@@ -313,9 +320,9 @@ struct Gallery2 {
if (this.preIndex === item.id) { if (this.preIndex === item.id) {
return return
} }
var innerEvent = { eventId: item.id } let innerEvent: emitter.InnerEvent = { eventId: item.id }
// Selected: from black to red // Selected: from black to red
var eventData = { let eventData: emitter.EventData = {
data: { data: {
"colorTag": 1 "colorTag": 1
} }
...@@ -324,9 +331,9 @@ struct Gallery2 { ...@@ -324,9 +331,9 @@ struct Gallery2 {
if (this.preIndex != -1) { if (this.preIndex != -1) {
console.info(`preIndex: ${this.preIndex}, index: ${item.id}, black`) console.info(`preIndex: ${this.preIndex}, index: ${item.id}, black`)
var innerEvent = { eventId: this.preIndex } let innerEvent: emitter.InnerEvent = { eventId: this.preIndex }
// Deselected: from red to black // Deselected: from red to black
var eventData = { let eventData: emitter.EventData = {
data: { data: {
"colorTag": 0 "colorTag": 0
} }
...@@ -335,7 +342,6 @@ struct Gallery2 { ...@@ -335,7 +342,6 @@ struct Gallery2 {
} }
this.preIndex = item.id this.preIndex = item.id
}) })
}, (item: ViewData) => JSON.stringify(item)) }, (item: ViewData) => JSON.stringify(item))
}.columnsTemplate('1fr 1fr') }.columnsTemplate('1fr 1fr')
} }
...@@ -346,17 +352,26 @@ struct Gallery2 { ...@@ -346,17 +352,26 @@ struct Gallery2 {
@Component @Component
export struct TapImage { export struct TapImage {
@State tapColor: Color = Color.Black; @State tapColor: Color = Color.Black;
private index: number; private index: number = 0;
private uri: Resource; private uri: Resource = {
id: 0,
type: 0,
moduleName: "",
bundleName: ""
};
onTapIndexChange(colorTag: emitter.EventData) { onTapIndexChange(colorTag: emitter.EventData) {
if (colorTag.data != null) {
this.tapColor = colorTag.data.colorTag ? Color.Red : Color.Black this.tapColor = colorTag.data.colorTag ? Color.Red : Color.Black
} }
}
aboutToAppear() { aboutToAppear() {
// Define the event ID. // Define the event ID.
var innerEvent = { eventId: this.index } let innerEvent: emitter.InnerEvent = { eventId: this.index }
emitter.on(innerEvent, this.onTapIndexChange.bind(this)) emitter.on(innerEvent, data => {
this.onTapIndexChange(data)
})
} }
build() { build() {
...@@ -414,8 +429,13 @@ struct Gallery2 { ...@@ -414,8 +429,13 @@ struct Gallery2 {
export struct TapImage { export struct TapImage {
@StorageLink('tapIndex') tapIndex: number = -1; @StorageLink('tapIndex') tapIndex: number = -1;
@State tapColor: Color = Color.Black; @State tapColor: Color = Color.Black;
private index: number; private index: number = 0;
private uri: Resource; private uri: Resource = {
id: 0,
type: 0,
moduleName: "",
bundleName: ""
};
build() { build() {
Column() { Column() {
...@@ -440,9 +460,9 @@ export struct TapImage { ...@@ -440,9 +460,9 @@ export struct TapImage {
When using AppStorage together with [PersistentStorage](arkts-persiststorage.md) and [Environment](arkts-environment.md), pay attention to the following: When using AppStorage together with [PersistentStorage](arkts-persiststorage.md) and [Environment](arkts-environment.md), pay attention to the following:
- A call to **PersistentStorage.PersistProp()** after creating the attribute in AppStorage uses the type and value in AppStorage and overwrites any attribute with the same name in PersistentStorage. In light of this, the opposite order of calls is recommended. For an example of incorrect usage, see [Accessing Attribute in AppStorage Before PersistentStorage](arkts-persiststorage.md#accessing-attribute-in-appstorage-before-persistentstorage). - A call to **PersistentStorage.persistProp()** after creating the attribute in AppStorage uses the type and value in AppStorage and overwrites any attribute with the same name in PersistentStorage. In light of this, the opposite order of calls is recommended. For an example of incorrect usage, see [Accessing Attribute in AppStorage Before PersistentStorage](arkts-persiststorage.md#accessing-attribute-in-appstorage-before-persistentstorage).
- A call to **Environment.EnvProp()** after creating the attribute in AppStorage will fail. This is because AppStorage already has an attribute with the same name, and the environment variable will not be written into AppStorage. Therefore, you are advised not to use the preset environment variable name in AppStorage. - A call to **Environment.envProp()** after creating the attribute in AppStorage will fail. This is because AppStorage already has an attribute with the same name, and the environment variable will not be written into AppStorage. Therefore, you are advised not to use the preset environment variable name in AppStorage.
- Changes to the variables decorated by state decorators will cause UI re-render. If the changes are for message communication, rather than for UI re-render, the emitter mode is recommended. For the example, see [Unrecommended: Using @StorageLink to Implement Event Notification](#unrecommended-using-storagelink-to-implement-event-notification). - Changes to the variables decorated by state decorators will cause UI re-render. If the changes are for message communication, rather than for UI re-render, the emitter mode is recommended. For the example, see [Unrecommended: Using @StorageLink to Implement Event Notification](#unrecommended-using-storagelink-to-implement-event-notification).
<!--no_check--> <!--no_check-->
en/application-dev/quick-start/arkts-builder.md
浏览文件 @ 2bd88a14
...@@ -77,13 +77,22 @@ In by-reference parameter passing, the passed parameters can be state variables, ...@@ -77,13 +77,22 @@ In by-reference parameter passing, the passed parameters can be state variables,
```ts ```ts
ABuilder( $$ : { paramA1: string, paramB1 : string } ); class ABuilderParam {
paramA1: string = ''
paramB1: string = ''
}
ABuilder($$ : ABuilderParam);
``` ```
```ts ```ts
@Builder function ABuilder($$: { paramA1: string }) { class ABuilderParam {
paramA1: string = ''
}
@Builder function ABuilder($$: ABuilderParam) {
Row() { Row() {
Text(`UseStateVarByReference: ${$$.paramA1} `) Text(`UseStateVarByReference: ${$$.paramA1} `)
} }
......
en/application-dev/quick-start/arkts-builderparam.md
浏览文件 @ 2bd88a14
...@@ -34,20 +34,24 @@ An \@BuildParam decorated method can be initialized only by an \@Builder functio ...@@ -34,20 +34,24 @@ An \@BuildParam decorated method can be initialized only by an \@Builder functio
- Initialization from the parent component - Initialization from the parent component
```ts ```ts
@Component @Component
struct Child { struct Child {
@BuilderParam aBuilder0: () => void; @Builder componentBuilder() {
Text(`Parent builder `)
}
@BuilderParam aBuilder0: () => void = this.componentBuilder;
build() { build() {
Column() { Column() {
this.aBuilder0() this.aBuilder0()
} }
} }
} }
@Entry @Entry
@Component @Component
struct Parent { struct Parent {
@Builder componentBuilder() { @Builder componentBuilder() {
Text(`Parent builder `) Text(`Parent builder `)
} }
...@@ -57,34 +61,40 @@ An \@BuildParam decorated method can be initialized only by an \@Builder functio ...@@ -57,34 +61,40 @@ An \@BuildParam decorated method can be initialized only by an \@Builder functio
Child({ aBuilder0: this.componentBuilder }) Child({ aBuilder0: this.componentBuilder })
} }
} }
} }
``` ```
- **this** in the function body points to the correct object. - **this** in the function body points to the correct object.
In the following example, when the **Parent** component calls **this.componentBuilder()**, **this.label** points to the owning component, that is, **Parent**. With **\@BuilderParam aBuilder0** passed to the **Child** component from **\@Builder componentBuilder()**, when the **Child** component calls **this.aBuilder0()**, **this.label** points to the label of the **Child** component, that is, **Child**. In the following example, when the **Parent** component calls **this.componentBuilder()**, **this.label** points to the owning component, that is, **Parent**. With **\@BuilderParam aBuilder0** passed to the **Child** component from **\@Builder componentBuilder()**, when the **Child** component calls **this.aBuilder0()**, **this.label** points to the label of the child component, that is, **Child**. For **\@BuilderParam aBuilder1**, when **this.componentBuilder** is passed to **aBuilder1**, **bind** is called to bind **this**. Therefore, **this.label** points to the label of the parent component.
> **NOTE** > **NOTE**
> >
> Exercise caution when using **bind** to change the context of function invoking, which may cause **this** to point to an incorrect object. > Exercise caution when using **bind** to change the context of function invoking, which may cause **this** to point to an incorrect object.
```ts ```ts
@Component @Component
struct Child { struct Child {
@Builder componentBuilder() {
Text(`Child builder `)
}
label: string = `Child` label: string = `Child`
@BuilderParam aBuilder0: () => void; @BuilderParam aBuilder0: () => void = this.componentBuilder;
@BuilderParam aBuilder1: () => void = this.componentBuilder;
build() { build() {
Column() { Column() {
this.aBuilder0() this.aBuilder0()
this.aBuilder1()
} }
} }
} }
@Entry @Entry
@Component @Component
struct Parent { struct Parent {
label: string = `Parent` label: string = `Parent`
@Builder componentBuilder() { @Builder componentBuilder() {
...@@ -94,10 +104,10 @@ An \@BuildParam decorated method can be initialized only by an \@Builder functio ...@@ -94,10 +104,10 @@ An \@BuildParam decorated method can be initialized only by an \@Builder functio
build() { build() {
Column() { Column() {
this.componentBuilder() this.componentBuilder()
Child({ aBuilder0: this.componentBuilder }) Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder })
}
} }
} }
}
``` ```
...@@ -110,7 +120,11 @@ An \@BuilderParam decorated method can be a method with or without parameters. W ...@@ -110,7 +120,11 @@ An \@BuilderParam decorated method can be a method with or without parameters. W
```ts ```ts
@Builder function GlobalBuilder1($$ : {label: string }) { class GlobalBuilderParam {
label: string = ""
}
@Builder function GlobalBuilder1($$ : GlobalBuilderParam) {
Text($$.label) Text($$.label)
.width(400) .width(400)
.height(50) .height(50)
...@@ -119,11 +133,15 @@ An \@BuilderParam decorated method can be a method with or without parameters. W ...@@ -119,11 +133,15 @@ An \@BuilderParam decorated method can be a method with or without parameters. W
@Component @Component
struct Child { struct Child {
@Builder componentBuilder() {
Text(`Child builder `)
}
label: string = 'Child' label: string = 'Child'
// Without parameters. The pointed componentBuilder is also without parameters. // Without parameters. The pointed componentBuilder is also without parameters.
@BuilderParam aBuilder0: () => void; @BuilderParam aBuilder0: () => void = this.componentBuilder;
// With parameters. The pointed GlobalBuilder1 is also with parameters. // With parameters. The pointed GlobalBuilder1 is also with parameters.
@BuilderParam aBuilder1: ($$ : { label : string}) => void; @BuilderParam aBuilder1: ($$ : GlobalBuilderParam) => void = this.componentBuilder;
build() { build() {
Column() { Column() {
...@@ -157,6 +175,7 @@ struct Parent { ...@@ -157,6 +175,7 @@ struct Parent {
In a custom component, the \@BuilderParam decorated attribute can be initialized using a trailing closure. During initialization, the component name is followed by a pair of braces ({}) to form a trailing closure. In a custom component, the \@BuilderParam decorated attribute can be initialized using a trailing closure. During initialization, the component name is followed by a pair of braces ({}) to form a trailing closure.
> **NOTE** > **NOTE**
>
> In this scenario, the custom component has one and only one \@BuilderParam decorated attribute. > In this scenario, the custom component has one and only one \@BuilderParam decorated attribute.
You can pass the content in the trailing closure to \@BuilderParam as an \@Builder decorated method. Example: You can pass the content in the trailing closure to \@BuilderParam as an \@Builder decorated method. Example:
...@@ -164,10 +183,17 @@ You can pass the content in the trailing closure to \@BuilderParam as an \@Build ...@@ -164,10 +183,17 @@ You can pass the content in the trailing closure to \@BuilderParam as an \@Build
```ts ```ts
// xxx.ets // xxx.ets
class CustomContainerParam {
header: string = '';
}
@Component @Component
struct CustomContainer { struct CustomContainer {
@Prop header: string; @Builder componentCloser() {
@BuilderParam closer: () => void Text(`Custom closer `)
}
@Prop header: string = '';
@BuilderParam closer: () => void = this.componentCloser;
build() { build() {
Column() { Column() {
...@@ -191,12 +217,15 @@ struct CustomContainer { ...@@ -191,12 +217,15 @@ struct CustomContainer {
@Component @Component
struct CustomContainerUser { struct CustomContainerUser {
@State text: string = 'header'; @State text: string = 'header';
param: CustomContainerParam = {
header: this.text
};
build() { build() {
Column() { Column() {
// Create the CustomContainer component. During initialization, append a pair of braces ({}) to the component name to form a trailing closure. // Create the CustomContainer component. During initialization, append a pair of braces ({}) to the component name to form a trailing closure.
// Used as the parameter passed to CustomContainer @BuilderParam closer: () => void. // Used as the parameter passed to CustomContainer @BuilderParam closer: () => void.
CustomContainer({ header: this.text }) { CustomContainer(this.param) {
Column() { Column() {
specificParam('testA', 'testB') specificParam('testA', 'testB')
}.backgroundColor(Color.Yellow) }.backgroundColor(Color.Yellow)
......
en/application-dev/quick-start/arkts-create-custom-components.md
浏览文件 @ 2bd88a14
...@@ -42,15 +42,23 @@ Multiple **HelloComponent** instances can be created in the **build()** function ...@@ -42,15 +42,23 @@ Multiple **HelloComponent** instances can be created in the **build()** function
```ts ```ts
class HelloComponentParam {
message: string = ""
}
@Entry @Entry
@Component @Component
struct ParentComponent { struct ParentComponent {
param: HelloComponentParam = {
message: 'Hello, World!'
}
build() { build() {
Column() { Column() {
Text('ArkUI message') Text('ArkUI message')
HelloComponent({ message: 'Hello, World!' }); HelloComponent(param);
Divider() Divider()
HelloComponent ({ message: 'Hello!' }); HelloComponent(param);
} }
} }
} }
...@@ -131,14 +139,14 @@ To fully understand the preceding example, a knowledge of the following concepts ...@@ -131,14 +139,14 @@ To fully understand the preceding example, a knowledge of the following concepts
``` ```
- \@Recycle: A custom component decorated with \@Recycle can be reused. - \@Reusable: Custom components decorated by \@Reusable can be reused.
> **NOTE** > **NOTE**
> >
> Since API version 10, this decorator is supported in ArkTS widgets. > Since API version 10, this decorator is supported in ArkTS widgets.
```ts ```ts
@Recycle @Reusable
@Component @Component
struct MyComponent { struct MyComponent {
} }
......
en/application-dev/quick-start/arkts-environment.md
浏览文件 @ 2bd88a14
...@@ -12,11 +12,11 @@ Environment is a singleton object created by the ArkUI framework at application ...@@ -12,11 +12,11 @@ Environment is a singleton object created by the ArkUI framework at application
### Accessing Environment Parameters from UI ### Accessing Environment Parameters from UI
- Use **Environment.EnvProp** to save the environment variables of the device to AppStorage. - Use **Environment.envProp** to save the environment variables of the device to AppStorage.
```ts ```ts
// Save languageCode to AppStorage. The default value is en. // Save languageCode to AppStorage. The default value is en.
Environment.EnvProp('languageCode', 'en'); Environment.envProp('languageCode', 'en');
``` ```
- Decorate the variables with \@StorageProp to link them with components. - Decorate the variables with \@StorageProp to link them with components.
...@@ -34,8 +34,8 @@ The chain of updates is as follows: Environment > AppStorage > Component. ...@@ -34,8 +34,8 @@ The chain of updates is as follows: Environment > AppStorage > Component.
```ts ```ts
// Save the device language code to AppStorage. // Save the device language code to AppStorage.
Environment.EnvProp('languageCode', 'en'); Environment.envProp('languageCode', 'en');
let enable = AppStorage.Get('languageCode'); let enable: undefined = AppStorage.get<undefined>('languageCode');
@Entry @Entry
@Component @Component
...@@ -59,9 +59,9 @@ struct Index { ...@@ -59,9 +59,9 @@ struct Index {
```ts ```ts
// Use Environment.EnvProp to save the device language code to AppStorage. // Use Environment.EnvProp to save the device language code to AppStorage.
Environment.EnvProp('languageCode', 'en'); Environment.envProp('languageCode', 'en');
// Obtain the one-way bound languageCode variable from AppStorage. // Obtain the one-way bound languageCode variable from AppStorage.
const lang: SubscribedAbstractProperty<string> = AppStorage.Prop('languageCode'); const lang: SubscribedAbstractProperty<string> = AppStorage.prop('languageCode');
if (lang.get() === 'en') { if (lang.get() === 'en') {
console.info('Hi'); console.info('Hi');
...@@ -89,7 +89,7 @@ export default class EntryAbility extends UIAbility { ...@@ -89,7 +89,7 @@ export default class EntryAbility extends UIAbility {
window.then(window => { window.then(window => {
let uicontext = window.getUIContext() let uicontext = window.getUIContext()
uicontext.runScopedTask(() => { uicontext.runScopedTask(() => {
Environment.EnvProp('languageCode', 'en'); Environment.envProp('languageCode', 'en');
}) })
}) })
} }
......
en/application-dev/quick-start/arkts-extend.md
浏览文件 @ 2bd88a14
...@@ -82,7 +82,7 @@ Apart from\@Styles used to extend styles, AkrUI also provides \@Extend, which al ...@@ -82,7 +82,7 @@ Apart from\@Styles used to extend styles, AkrUI also provides \@Extend, which al
build() { build() {
Row({ space: 10 }) { Row({ space: 10 }) {
Text(`${this.label}`) Text(`${this.label}`)
.makeMeClick(this.onClickHandler.bind(this)) .makeMeClick(this.onClickHandler)
} }
} }
} }
......
en/application-dev/quick-start/arkts-link.md
浏览文件 @ 2bd88a14
...@@ -227,10 +227,10 @@ struct Parent { ...@@ -227,10 +227,10 @@ struct Parent {
Column() { Column() {
Child({ items: $arr }) Child({ items: $arr })
ForEach(this.arr, ForEach(this.arr,
item => { (item: void) => {
Text(`${item}`) Text(`${item}`)
}, },
item => item.toString() (item: ForEachInterface) => item.toString()
) )
} }
} }
......
en/application-dev/quick-start/arkts-localstorage.md
浏览文件 @ 2bd88a14
...@@ -191,25 +191,26 @@ This example uses \@LocalStorage as an example to show how to: ...@@ -191,25 +191,26 @@ This example uses \@LocalStorage as an example to show how to:
- Use \@LocalStorageLink to create a two-way data synchronization with the given attribute in LocalStorage. - Use \@LocalStorageLink to create a two-way data synchronization with the given attribute in LocalStorage.
```ts ```ts
// Create a new instance and initialize it with the given object. // Create a new instance and initialize it with the given object.
let storage = new LocalStorage({ 'PropA': 47 }); let storage = new LocalStorage();
storage['PropA'] = 47;
@Component @Component
struct Child { struct Child {
// @LocalStorageLink creates a two-way data synchronization with the ProA attribute in LocalStorage. // @LocalStorageLink creates a two-way data synchronization with the PropA attribute in LocalStorage.
@LocalStorageLink('PropA') storLink2: number = 1; @LocalStorageLink('PropA') storLink2: number = 1;
build() { build() {
Button(`Child from LocalStorage ${this.storLink2}`) Button(`Child from LocalStorage ${this.storLink2}`)
// The changes will be synchronized to ProA in LocalStorage and with Parent.storLink1. // The changes will be synchronized to PropA in LocalStorage and with Parent.storLink1.
.onClick(() => this.storLink2 += 1) .onClick(() => this.storLink2 += 1)
} }
} }
// Make LocalStorage accessible from the @Component decorated component. // Make LocalStorage accessible from the @Component decorated component.
@Entry(storage) @Entry(storage)
@Component @Component
struct CompA { struct CompA {
// @LocalStorageLink creates a two-way data synchronization with the ProA attribute in LocalStorage. // @LocalStorageLink creates a two-way data synchronization with the PropA attribute in LocalStorage.
@LocalStorageLink('PropA') storLink1: number = 1; @LocalStorageLink('PropA') storLink1: number = 1;
build() { build() {
...@@ -220,7 +221,7 @@ This example uses \@LocalStorage as an example to show how to: ...@@ -220,7 +221,7 @@ This example uses \@LocalStorage as an example to show how to:
Child() Child()
} }
} }
} }
``` ```
...@@ -233,13 +234,15 @@ In this example, the **CompA** and **Child** components create local data that i ...@@ -233,13 +234,15 @@ In this example, the **CompA** and **Child** components create local data that i
- In the **Child** component, the value of **storProp2** bound to **Text** is still 47. - In the **Child** component, the value of **storProp2** bound to **Text** is still 47.
```ts ```ts
// Create a new instance and initialize it with the given object. // Create a new instance and initialize it with the given object.
let storage = new LocalStorage({ 'PropA': 47 }); let storage = new LocalStorage();
// Make LocalStorage accessible from the @Component decorated component. storage['PropA'] = 47;
@Entry(storage)
@Component // Make LocalStorage accessible from the @Component decorated component.
struct CompA { @Entry(storage)
// @LocalStorageProp creates a one-way data synchronization with the ProA attribute in LocalStorage. @Component
struct CompA {
// @LocalStorageProp creates a one-way data synchronization with the PropA attribute in LocalStorage.
@LocalStorageProp('PropA') storProp1: number = 1; @LocalStorageProp('PropA') storProp1: number = 1;
build() { build() {
...@@ -250,11 +253,11 @@ In this example, the **CompA** and **Child** components create local data that i ...@@ -250,11 +253,11 @@ In this example, the **CompA** and **Child** components create local data that i
Child() Child()
} }
} }
} }
@Component @Component
struct Child { struct Child {
// @LocalStorageProp creates a one-way data synchronization with the ProA attribute in LocalStorage. // @LocalStorageProp creates a one-way data synchronization with the PropA attribute in LocalStorage.
@LocalStorageProp('PropA') storProp2: number = 2; @LocalStorageProp('PropA') storProp2: number = 2;
build() { build() {
...@@ -263,7 +266,7 @@ In this example, the **CompA** and **Child** components create local data that i ...@@ -263,7 +266,7 @@ In this example, the **CompA** and **Child** components create local data that i
Text(`Parent from LocalStorage ${this.storProp2}`) Text(`Parent from LocalStorage ${this.storProp2}`)
} }
} }
} }
``` ```
...@@ -274,9 +277,10 @@ This example shows how to create a two-way data synchronization between an \@Loc ...@@ -274,9 +277,10 @@ This example shows how to create a two-way data synchronization between an \@Loc
```ts ```ts
// Create a LocalStorage instance. // Create a LocalStorage instance.
let storage = new LocalStorage({ 'PropA': 47 }); let storage = new LocalStorage();
storage['PropA'] = 47;
// Invoke the link9+ API to create a two-way data synchronization with PropA. linkToPropA is a global variable. // Invoke the link9+ API to create a two-way data synchronization with PropA. linkToPropA is a global variable.
let linkToPropA = storage.link('PropA'); let linkToPropA = storage.link<number>('PropA');
@Entry(storage) @Entry(storage)
@Component @Component
...@@ -388,22 +392,21 @@ import UIAbility from '@ohos.app.ability.UIAbility'; ...@@ -388,22 +392,21 @@ import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window'; import window from '@ohos.window';
export default class EntryAbility extends UIAbility { export default class EntryAbility extends UIAbility {
storage: LocalStorage = new LocalStorage({ storage: LocalStorage = new LocalStorage();
'PropA': 47
});
onWindowStageCreate(windowStage: window.WindowStage) { onWindowStageCreate(windowStage: window.WindowStage) {
this.storage['PropA'] = 47;
windowStage.loadContent('pages/Index', this.storage); windowStage.loadContent('pages/Index', this.storage);
} }
} }
``` ```
On the page, call the **GetShared** API to obtain the LocalStorage instance shared through **loadContent**. On the page, call the **getShared** API to obtain the LocalStorage instance shared through **loadContent**.
```ts ```ts
// Use the GetShared API to obtain the LocalStorage instance shared by stage. // Use the getShared API to obtain the LocalStorage instance shared by stage.
let storage = LocalStorage.GetShared() let storage = LocalStorage.getShared()
@Entry(storage) @Entry(storage)
@Component @Component
......
en/application-dev/quick-start/arkts-observed-and-objectlink.md
浏览文件 @ 2bd88a14
...@@ -35,7 +35,7 @@ Using \@Observed to decorate a class changes the original prototype chain of the ...@@ -35,7 +35,7 @@ Using \@Observed to decorate a class changes the original prototype chain of the
| ----------------- | ---------------------------------------- | | ----------------- | ---------------------------------------- |
| Decorator parameters | None. | | Decorator parameters | None. |
| Synchronization type | No synchronization with the parent component. | | Synchronization type | No synchronization with the parent component. |
| Allowed variable types | Objects of \@Observed decorated classes. The type must be specified.<br>Simple type variables are not supported. Use [\@Prop](arkts-prop.md) instead.<br>An \@ObjectLink decorated variable accepts changes to its attributes, but assignment is not allowed. In other words, an \@ObjectLink decorated variable is read-only and cannot be changed.| | Allowed variable types | Objects of \@Observed decorated classes. The type must be specified.<br>Simple type variables are not supported. Use [\@Prop](arkts-prop.md) instead.<br>Instances of classes that inherit **Date** or **Array** are supported. For details, see [Observed Changes](#observed-changes).<br>An \@ObjectLink decorated variable accepts changes to its attributes, but assignment is not allowed. In other words, an \@ObjectLink decorated variable is read-only and cannot be changed.|
| Initial value for the decorated variable | Not allowed. | | Initial value for the decorated variable | Not allowed. |
Example of a read-only \@ObjectLink decorated variable: Example of a read-only \@ObjectLink decorated variable:
...@@ -121,6 +121,67 @@ this.b.a.c = 5 ...@@ -121,6 +121,67 @@ this.b.a.c = 5
- Replacement of array items for the data source of an array and changes of class attributes for the data source of a class. For details, see [Object Array](#object-array). - Replacement of array items for the data source of an array and changes of class attributes for the data source of a class. For details, see [Object Array](#object-array).
For an instance of the class that inherits **Date**, the value assignment of **Date** can be observed. In addition, you can call the following APIs to update the attributes of **Date**: setFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds.
```ts
@Observed
class DateClass extends Date {
constructor(args: number | string) {
super(args)
}
}
@Observed
class ClassB {
public a: DateClass;
constructor(a: DateClass) {
this.a = a;
}
}
@Component
struct ViewA {
label: string = 'date';
@ObjectLink a: DateClass;
build() {
Column() {
Button(`child increase the day by 1`)
.onClick(() => {
this.a.setDate(this.a.getDate() + 1);
})
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: this.a
})
}
}
}
@Entry
@Component
struct ViewB {
@State b: ClassB = new ClassB(new DateClass('2023-1-1'));
build() {
Column() {
ViewA({ label: 'date', a: this.b.a })
Button(`parent update the new date`)
.onClick(() => {
this.b.a = new DateClass('2023-07-07');
})
Button(`ViewB: this.b = new ClassB(new DateClass('2023-08-20'))`)
.onClick(() => {
this.b = new ClassB(new DateClass('2023-08-20'));
})
}
}
}
```
### Framework Behavior ### Framework Behavior
...@@ -282,10 +343,10 @@ struct ViewB { ...@@ -282,10 +343,10 @@ struct ViewB {
build() { build() {
Column() { Column() {
ForEach(this.arrA, ForEach(this.arrA,
(item) => { (item: ClassA) => {
ViewA({ label: `#${item.id}`, a: item }) ViewA({ label: `#${item.id}`, a: item })
}, },
(item) => item.id.toString() (item: ClassA) => item.id.toString()
) )
// Initialize the @ObjectLink decorated variable using the array item in the @State decorated array, which is an instance of ClassA decorated by @Observed. // Initialize the @ObjectLink decorated variable using the array item in the @State decorated array, which is an instance of ClassA decorated by @Observed.
ViewA({ label: `ViewA this.arrA[first]`, a: this.arrA[0] }) ViewA({ label: `ViewA this.arrA[first]`, a: this.arrA[0] })
...@@ -358,11 +419,11 @@ struct ItemPage { ...@@ -358,11 +419,11 @@ struct ItemPage {
.width(100).height(100) .width(100).height(100)
ForEach(this.itemArr, ForEach(this.itemArr,
item => { (item: string | Resource) => {
Text(item) Text(item)
.width(100).height(100) .width(100).height(100)
}, },
item => item (item: string) => item
) )
} }
} }
...@@ -378,14 +439,14 @@ struct IndexPage { ...@@ -378,14 +439,14 @@ struct IndexPage {
ItemPage({ itemArr: this.arr[0] }) ItemPage({ itemArr: this.arr[0] })
ItemPage({ itemArr: this.arr[1] }) ItemPage({ itemArr: this.arr[1] })
ItemPage({ itemArr: this.arr[2] }) ItemPage({ itemArr: this.arr[2] })
Divider() Divider()
ForEach(this.arr, ForEach(this.arr,
itemArr => { (itemArr: StringArray) => {
ItemPage({ itemArr: itemArr }) ItemPage({ itemArr: itemArr })
}, },
itemArr => itemArr[0] (itemArr: string) => itemArr[0]
) )
Divider() Divider()
...@@ -393,7 +454,7 @@ struct IndexPage { ...@@ -393,7 +454,7 @@ struct IndexPage {
Button('update') Button('update')
.onClick(() => { .onClick(() => {
console.error('Update all items in arr'); console.error('Update all items in arr');
if (this.arr[0][0] !== undefined) { if ((this.arr[0] as Array<String>)[0] !== undefined) {
// We should have a real ID to use with ForEach, but we do no. // We should have a real ID to use with ForEach, but we do no.
// Therefore, we need to make sure the pushed strings are unique. // Therefore, we need to make sure the pushed strings are unique.
this.arr[0].push(`${this.arr[0].slice(-1).pop()}${this.arr[0].slice(-1).pop()}`); this.arr[0].push(`${this.arr[0].slice(-1).pop()}${this.arr[0].slice(-1).pop()}`);
......
en/application-dev/quick-start/arkts-persiststorage.md
浏览文件 @ 2bd88a14
...@@ -34,13 +34,13 @@ PersistentStorage can be called to persist data only when the [UIContext](../ref ...@@ -34,13 +34,13 @@ PersistentStorage can be called to persist data only when the [UIContext](../ref
1. Initialize the PersistentStorage instance. 1. Initialize the PersistentStorage instance.
```ts ```ts
PersistentStorage.PersistProp('aProp', 47); PersistentStorage.persistProp('aProp', 47);
``` ```
2. Obtain the corresponding attribute from AppStorage. 2. Obtain the corresponding attribute from AppStorage.
```ts ```ts
AppStorage.Get('aProp'); // returns 47 AppStorage.get<number>('aProp'); // returns 47
``` ```
Alternatively, apply local definition within the component: Alternatively, apply local definition within the component:
...@@ -54,7 +54,7 @@ The complete code is as follows: ...@@ -54,7 +54,7 @@ The complete code is as follows:
```ts ```ts
PersistentStorage.PersistProp('aProp', 47); PersistentStorage.persistProp('aProp', 47);
@Entry @Entry
@Component @Component
...@@ -78,7 +78,7 @@ struct Index { ...@@ -78,7 +78,7 @@ struct Index {
``` ```
- First running after fresh application installation: - First running after fresh application installation:
1. **PersistProp** is called to initialize PersistentStorage. A search for the **aProp** attribute on the PersistentStorage disk returns no result, because the application has just been installed. 1. **persistProp** is called to initialize PersistentStorage. A search for the **aProp** attribute on the PersistentStorage disk returns no result, because the application has just been installed.
2. A search for the attribute **aProp** in AppStorage still returns no result. 2. A search for the attribute **aProp** in AppStorage still returns no result.
3. Create the **aProp** attribute of the number type in AppStorge and initialize it with the value 47. 3. Create the **aProp** attribute of the number type in AppStorge and initialize it with the value 47.
4. PersistentStorage writes the **aProp** attribute and its value **47** to the disk. The value of **aProp** in AppStorage and its subsequent changes are persisted. 4. PersistentStorage writes the **aProp** attribute and its value **47** to the disk. The value of **aProp** in AppStorage and its subsequent changes are persisted.
...@@ -95,21 +95,21 @@ struct Index { ...@@ -95,21 +95,21 @@ struct Index {
4. Because the attribute corresponding to **aProp** has been persisted, the change of the **aProp** attribute in AppStorage triggers PersistentStorage to write the attribute and its new value to the device disk. 4. Because the attribute corresponding to **aProp** has been persisted, the change of the **aProp** attribute in AppStorage triggers PersistentStorage to write the attribute and its new value to the device disk.
- Subsequent application running: - Subsequent application running:
1. **PersistentStorage.PersistProp('aProp', 47)** is called. A search for the **aProp** attribute on the PersistentStorage disk succeeds. 1. **PersistentStorage.persistProp('aProp', 47)** is called. A search for the **aProp** attribute on the PersistentStorage disk succeeds.
2. The attribute is added to AppStorage with the value found on the PersistentStorage disk. 2. The attribute is added to AppStorage with the value found on the PersistentStorage disk.
3. In the **\<Index>** component, the value of the @StorageLink decorated **aProp** attribute is the value written by PersistentStorage to AppStorage, that is, the value stored when the application was closed last time. 3. In the **\<Index>** component, the value of the @StorageLink decorated **aProp** attribute is the value written by PersistentStorage to AppStorage, that is, the value stored when the application was closed last time.
### Accessing Attribute in AppStorage Before PersistentStorage ### Accessing Attribute in AppStorage Before PersistentStorage
This example is an incorrect use. It is incorrect to use the API to access the attributes in AppStorage before calling **PersistentStorage.PersistProp** or **PersistProps**, because such a call sequence will result in loss of the attribute values used in the previous application run: This example is an incorrect use. It is incorrect to use the API to access the attributes in AppStorage before calling **PersistentStorage.persistProp** or **persistProps**, because such a call sequence will result in loss of the attribute values used in the previous application run:
```ts ```ts
let aProp = AppStorage.SetOrCreate('aProp', 47); let aProp = AppStorage.setOrCreate('aProp', 47);
PersistentStorage.PersistProp('aProp', 48); PersistentStorage.persistProp('aProp', 48);
``` ```
**AppStorage.SetOrCreate('aProp', 47)**: The **aProp** attribute is created in AppStorage, its type is number, and its value is set to the specified default value **47**. **aProp** is a persisted attribute. Therefore, it is written back to the PersistentStorage disk, and the value stored in the PersistentStorage disk from the previous run is lost. **AppStorage.setOrCreate('aProp', 47)**: The **aProp** attribute is created in AppStorage, its type is number, and its value is set to the specified default value **47**. **aProp** is a persisted attribute. Therefore, it is written back to the PersistentStorage disk, and the value stored in the PersistentStorage disk from the previous run is lost.
**PersistentStorage.PersistProp('aProp', 48)**: An attribute with same name **aProp** is available in PersistentStorage. **PersistentStorage.persistProp('aProp', 48)**: An attribute with same name **aProp** is available in PersistentStorage.
en/application-dev/quick-start/har-package.md
浏览文件 @ 2bd88a14
...@@ -5,33 +5,30 @@ A Harmony Archive (HAR) is a static shared package that can contain code, C++ li ...@@ -5,33 +5,30 @@ A Harmony Archive (HAR) is a static shared package that can contain code, C++ li
You can [create a HAR module in DevEco Studio](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/creating_har_api9-0000001518082393-V3#section143510369612). You can [create a HAR module in DevEco Studio](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/creating_har_api9-0000001518082393-V3#section143510369612).
To better protect your source code, enable obfuscation for the HAR module so that DevEco Studio compiles, obfuscates, and compresses code during HAR building. To better protect your source code, enable obfuscation for the HAR module so that DevEco Studio compiles, obfuscates, and compresses code during HAR building.
> **NOTE** > **NOTE**
> >
> Obfuscation is only available for ArkTS projects in the stage model. > Obfuscation is only available for ArkTS projects in the stage model.
### Obfuscation in API Version 9 Whether obfuscation is enabled by default varies by version.
In API version 9, obfuscation is disabled by default, and can be enabled by setting **artifactType** to **obfuscation** in the **build-profile.json5** file of the HAR module. The configuration is as follows: - In API version 9, obfuscation is disabled by default, and can be enabled by setting **artifactType** to **obfuscation** in the **build-profile.json5** file of the HAR module. The configuration is as follows:
```json ```json
{ {
"apiType": "stageMode", "apiType": "stageMode",
"buildOption": { "buildOption": {
"artifactType": "obfuscation" "artifactType": "obfuscation"
} }
} }
``` ```
The value options of **artifactType** are as follows, with the default value being **original**: The value options of **artifactType** are as follows, with the default value being **original**:
- **original**: Code is not obfuscated. - **original**: Code is not obfuscated.
- **obfuscation**: Code is obfuscated using Uglify. - **obfuscation**: Code is obfuscated using Uglify.
### Obfuscation in API Version 10
In API version 10, obfuscation is enabled by default, and can be set through the **enable** field under **ruleOptions** in the **build-profile.json5** file of the HAR module. The configuration is as follows: - In API version 10, obfuscation is enabled by default, and can be set through the **enable** field under **ruleOptions** in the **build-profile.json5** file of the HAR module. The configuration is as follows:
```json ```json
{ {
"apiType": "stageMode", "apiType": "stageMode",
"buildOption": { "buildOption": {
}, },
...@@ -58,8 +55,8 @@ In API version 10, obfuscation is enabled by default, and can be set through the ...@@ -58,8 +55,8 @@ In API version 10, obfuscation is enabled by default, and can be set through the
"name": "default" "name": "default"
} }
] ]
} }
``` ```
### Adaptation Guide ### Adaptation Guide
The **artifactType** field is forward compatible, and the original function is not affected. Yet, it is deprecated since API version 10, and you are advised to use the substitute as soon as possible. The **artifactType** field is forward compatible, and the original function is not affected. Yet, it is deprecated since API version 10, and you are advised to use the substitute as soon as possible.
...@@ -108,7 +105,7 @@ Use **export** to export TS classes and methods. Multiple TS classes and methods ...@@ -108,7 +105,7 @@ Use **export** to export TS classes and methods. Multiple TS classes and methods
```js ```js
// library/src/main/ts/test.ets // library/src/main/ts/test.ets
export class Log { export class Log {
static info(msg) { static info(msg: string) {
console.info(msg); console.info(msg);
} }
} }
......
en/application-dev/reference/apis/js-apis-router.md
浏览文件 @ 2bd88a14
...@@ -55,21 +55,34 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -55,21 +55,34 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushUrl({ import { BusinessError } from '@ohos.base';
url: 'pages/routerpage2',
params: { class innerParams {
data1: 'message', data3:number[]
data2: {
data3: [123, 456, 789] constructor(tuple:number[]) {
this.data3 = tuple
} }
}
class routerParams {
data1:string
data2:innerParams
constructor(str:string, tuple:number[]) {
this.data1 = str
this.data2 = new innerParams(tuple)
} }
}) }
.then(() => {
// success try {
}) router.pushUrl({
.catch(err => { url: 'pages/routerpage2',
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); params: new routerParams('message' ,[123,456,789])
}) })
} catch (err) {
console.error(`pushUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}
``` ```
## router.pushUrl<sup>9+</sup> ## router.pushUrl<sup>9+</sup>
...@@ -100,14 +113,27 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -100,14 +113,27 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushUrl({ class innerParams {
url: 'pages/routerpage2', data3:number[]
params: {
data1: 'message', constructor(tuple:number[]) {
data2: { this.data3 = tuple
data3: [123, 456, 789]
} }
}
class routerParams {
data1:string
data2:innerParams
constructor(str:string, tuple:number[]) {
this.data1 = str
this.data2 = new innerParams(tuple)
} }
}
router.pushUrl({
url: 'pages/routerpage2',
params: new routerParams('message' ,[123,456,789])
}, (err) => { }, (err) => {
if (err) { if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
...@@ -150,21 +176,34 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -150,21 +176,34 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushUrl({ import { BusinessError } from '@ohos.base';
url: 'pages/routerpage2',
params: { class innerParams {
data1: 'message', data3:number[]
data2: {
data3: [123, 456, 789] constructor(tuple:number[]) {
this.data3 = tuple
} }
}
class routerParams {
data1:string
data2:innerParams
constructor(str:string, tuple:number[]) {
this.data1 = str
this.data2 = new innerParams(tuple)
} }
}, router.RouterMode.Standard) }
.then(() => {
// success try {
}) router.pushUrl({
.catch(err => { url: 'pages/routerpage2',
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); params: new routerParams('message' ,[123,456,789])
}) }, router.RouterMode.Standard)
} catch (err) {
console.error(`pushUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}
``` ```
## router.pushUrl<sup>9+</sup> ## router.pushUrl<sup>9+</sup>
...@@ -196,14 +235,27 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -196,14 +235,27 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushUrl({ class innerParams {
url: 'pages/routerpage2', data3:number[]
params: {
data1: 'message', constructor(tuple:number[]) {
data2: { this.data3 = tuple
data3: [123, 456, 789]
} }
}
class routerParams {
data1:string
data2:innerParams
constructor(str:string, tuple:number[]) {
this.data1 = str
this.data2 = new innerParams(tuple)
} }
}
router.pushUrl({
url: 'pages/routerpage2',
params: new routerParams('message' ,[123,456,789])
}, router.RouterMode.Standard, (err) => { }, router.RouterMode.Standard, (err) => {
if (err) { if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
...@@ -245,18 +297,24 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -245,18 +297,24 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.replaceUrl({ import { BusinessError } from '@ohos.base';
url: 'pages/detail',
params: { class routerParams {
data1: 'message' data1:string
constructor(str:string) {
this.data1 = str
} }
}) }
.then(() => {
// success try {
}) router.replaceUrl({
.catch(err => { url: 'pages/detail',
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); params: new routerParams('message')
}) })
} catch (err) {
console.error(`replaceUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}
``` ```
## router.replaceUrl<sup>9+</sup> ## router.replaceUrl<sup>9+</sup>
...@@ -286,11 +344,17 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -286,11 +344,17 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
class routerParams {
data1:string
constructor(str:string) {
this.data1 = str
}
}
router.replaceUrl({ router.replaceUrl({
url: 'pages/detail', url: 'pages/detail',
params: { params: new routerParams('message')
data1: 'message'
}
}, (err) => { }, (err) => {
if (err) { if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
...@@ -334,18 +398,24 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -334,18 +398,24 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.replaceUrl({ import { BusinessError } from '@ohos.base';
url: 'pages/detail',
params: { class routerParams {
data1: 'message' data1:string
constructor(str:string) {
this.data1 = str
} }
}, router.RouterMode.Standard) }
.then(() => {
// success try {
}) router.replaceUrl({
.catch(err => { url: 'pages/detail',
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); params: new routerParams('message')
}) }, router.RouterMode.Standard)
} catch (err) {
console.error(`replaceUrl failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}
``` ```
## router.replaceUrl<sup>9+</sup> ## router.replaceUrl<sup>9+</sup>
...@@ -376,11 +446,17 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -376,11 +446,17 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
class routerParams {
data1:string
constructor(str:string) {
this.data1 = str
}
}
router.replaceUrl({ router.replaceUrl({
url: 'pages/detail', url: 'pages/detail',
params: { params: new routerParams('message')
data1: 'message'
}
}, router.RouterMode.Standard, (err) => { }, router.RouterMode.Standard, (err) => {
if (err) { if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`); console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
...@@ -424,21 +500,34 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -424,21 +500,34 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushNamedRoute({ import { BusinessError } from '@ohos.base';
name: 'myPage',
params: { class innerParams {
data1: 'message', data3:number[]
data2: {
data3: [123, 456, 789] constructor(tuple:number[]) {
this.data3 = tuple
} }
}
class routerParams {
data1:string
data2:innerParams
constructor(str:string, tuple:number[]) {
this.data1 = str
this.data2 = new innerParams(tuple)
} }
}) }
.then(() => {
// success try {
}) router.pushNamedRoute({
.catch(err => { name: 'myPage',
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); params: new routerParams('message' ,[123,456,789])
}) })
} catch (err) {
console.error(`pushNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}
``` ```
For details, see [UI Development-Named Route](../../ui/arkts-routing.md#named-route). For details, see [UI Development-Named Route](../../ui/arkts-routing.md#named-route).
...@@ -471,14 +560,27 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -471,14 +560,27 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushNamedRoute({ class innerParams {
name: 'myPage', data3:number[]
params: {
data1: 'message', constructor(tuple:number[]) {
data2: { this.data3 = tuple
data3: [123, 456, 789]
} }
}
class routerParams {
data1:string
data2:innerParams
constructor(str:string, tuple:number[]) {
this.data1 = str
this.data2 = new innerParams(tuple)
} }
}
router.pushNamedRoute({
name: 'myPage',
params: new routerParams('message' ,[123,456,789])
}, (err) => { }, (err) => {
if (err) { if (err) {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
...@@ -521,21 +623,34 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -521,21 +623,34 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushNamedRoute({ import { BusinessError } from '@ohos.base';
name: 'myPage',
params: { class innerParams {
data1: 'message', data3:number[]
data2: {
data3: [123, 456, 789] constructor(tuple:number[]) {
this.data3 = tuple
} }
}
class routerParams {
data1:string
data2:innerParams
constructor(str:string, tuple:number[]) {
this.data1 = str
this.data2 = new innerParams(tuple)
} }
}, router.RouterMode.Standard) }
.then(() => {
// success try {
}) router.pushNamedRoute({
.catch(err => { name: 'myPage',
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); params: new routerParams('message' ,[123,456,789])
}) }, router.RouterMode.Standard)
} catch (err) {
console.error(`pushNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}
``` ```
## router.pushNamedRoute<sup>10+</sup> ## router.pushNamedRoute<sup>10+</sup>
...@@ -567,14 +682,27 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -567,14 +682,27 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.pushNamedRoute({ class innerParams {
name: 'myPage', data3:number[]
params: {
data1: 'message', constructor(tuple:number[]) {
data2: { this.data3 = tuple
data3: [123, 456, 789]
} }
}
class routerParams {
data1:string
data2:innerParams
constructor(str:string, tuple:number[]) {
this.data1 = str
this.data2 = new innerParams(tuple)
} }
}
router.pushNamedRoute({
name: 'myPage',
params: new routerParams('message' ,[123,456,789])
}, router.RouterMode.Standard, (err) => { }, router.RouterMode.Standard, (err) => {
if (err) { if (err) {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`);
...@@ -616,18 +744,24 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -616,18 +744,24 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.replaceNamedRoute({ import { BusinessError } from '@ohos.base';
name: 'myPage',
params: { class routerParams {
data1: 'message' data1:string
constructor(str:string) {
this.data1 = str
} }
}) }
.then(() => {
// success try {
}) router.replaceNamedRoute({
.catch(err => { name: 'myPage',
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); params: new routerParams('message')
}) })
} catch (err) {
console.error(`replaceNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}
``` ```
## router.replaceNamedRoute<sup>10+</sup> ## router.replaceNamedRoute<sup>10+</sup>
...@@ -657,11 +791,17 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -657,11 +791,17 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
class routerParams {
data1:string
constructor(str:string) {
this.data1 = str
}
}
router.replaceNamedRoute({ router.replaceNamedRoute({
name: 'myPage', name: 'myPage',
params: { params: new routerParams('message')
data1: 'message'
}
}, (err) => { }, (err) => {
if (err) { if (err) {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
...@@ -705,18 +845,24 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -705,18 +845,24 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.replaceNamedRoute({ import { BusinessError } from '@ohos.base';
name: 'myPage',
params: { class routerParams {
data1: 'message' data1:string
constructor(str:string) {
this.data1 = str
} }
}, router.RouterMode.Standard) }
.then(() => {
// success try {
}) router.replaceNamedRoute({
.catch(err => { name: 'myPage',
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); params: new routerParams('message')
}) }, router.RouterMode.Standard)
} catch (err) {
console.error(`replaceNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}
``` ```
## router.replaceNamedRoute<sup>10+</sup> ## router.replaceNamedRoute<sup>10+</sup>
...@@ -747,11 +893,17 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -747,11 +893,17 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
class routerParams {
data1:string
constructor(str:string) {
this.data1 = str
}
}
router.replaceNamedRoute({ router.replaceNamedRoute({
name: 'myPage', name: 'myPage',
params: { params: new routerParams('message')
data1: 'message'
}
}, router.RouterMode.Standard, (err) => { }, router.RouterMode.Standard, (err) => {
if (err) { if (err) {
console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`); console.error(`replaceNamedRoute failed, code is ${err.code}, message is ${err.message}`);
...@@ -877,15 +1029,15 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc ...@@ -877,15 +1029,15 @@ For details about the error codes, see [Router Error Codes](../errorcodes/errorc
**Example** **Example**
```ts ```ts
router.showAlertBeforeBackPage({ import { BusinessError } from '@ohos.base';
try {
router.showAlertBeforeBackPage({
message: 'Message Info' message: 'Message Info'
}) });
.then(() => { } catch(err) {
// success console.error(`showAlertBeforeBackPage failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
}) }
.catch(err => {
console.error(`showAlertBeforeBackPage failed, code is ${error.code}, message is ${error.message}`);
})
``` ```
## EnableAlertOptions ## EnableAlertOptions
...@@ -999,6 +1151,26 @@ export default { ...@@ -999,6 +1151,26 @@ export default {
```ts ```ts
// Navigate to the target page through router.pushUrl with the params parameter carried. // Navigate to the target page through router.pushUrl with the params parameter carried.
import router from '@ohos.router' import router from '@ohos.router'
import { BusinessError } from '@ohos.base'
// Define the class for passing parameters.
class innerParams {
array:number[]
constructor(tuple:number[]) {
this.array = tuple
}
}
class routerParams {
text:string
data:innerParams
constructor(str:string, tuple:number[]) {
this.text = str
this.data = new innerParams(tuple)
}
}
@Entry @Entry
@Component @Component
...@@ -1006,17 +1178,12 @@ struct Index { ...@@ -1006,17 +1178,12 @@ struct Index {
async routePage() { async routePage() {
let options = { let options = {
url: 'pages/second', url: 'pages/second',
params: { params: new routerParams ('This is the value on the first page', [12, 45, 78])
text: 'This is the value on the first page.',
data: {
array: [12, 45, 78]
}
}
} }
try { try {
await router.pushUrl(options) await router.pushUrl(options)
} catch (err) { } catch (err) {
console.info(` fail callback, code: ${err.code}, msg: ${err.msg}`) console.info(` fail callback, code: ${(err as BusinessError).code}, msg: ${(err as BusinessError).msg}`)
} }
} }
...@@ -1046,12 +1213,30 @@ struct Index { ...@@ -1046,12 +1213,30 @@ struct Index {
// Receive the transferred parameters on the second page. // Receive the transferred parameters on the second page.
import router from '@ohos.router' import router from '@ohos.router'
class innerParams {
array:number[]
constructor(tuple:number[]) {
this.array = tuple
}
}
class routerParams {
text:string
data:innerParams
constructor(str:string, tuple:number[]) {
this.text = str
this.data = new innerParams(tuple)
}
}
@Entry @Entry
@Component @Component
struct Second { struct Second {
private content: string = "This is the second page." private content: string = "This is the second page."
@State text: string = router.getParams()['text'] @State text: string = (router.getParams() as routerParams).text
@State data: object = router.getParams()['data'] @State data: object = (router.getParams() as routerParams).data
@State secondData: string = '' @State secondData: string = ''
build() { build() {
...@@ -1096,14 +1281,27 @@ This API is deprecated since API version 9. You are advised to use [pushUrl<sup> ...@@ -1096,14 +1281,27 @@ This API is deprecated since API version 9. You are advised to use [pushUrl<sup>
**Example** **Example**
```ts ```ts
router.push({ class innerParams {
url: 'pages/routerpage2', data3:number[]
params: {
data1: 'message', constructor(tuple:number[]) {
data2: { this.data3 = tuple
data3: [123, 456, 789]
} }
}
class routerParams {
data1:string
data2:innerParams
constructor(str:string, tuple:number[]) {
this.data1 = str
this.data2 = new innerParams(tuple)
} }
}
router.push({
url: 'pages/routerpage2',
params: new routerParams('message' ,[123,456,789])
}); });
``` ```
...@@ -1126,11 +1324,17 @@ This API is deprecated since API version 9. You are advised to use [replaceUrl<s ...@@ -1126,11 +1324,17 @@ This API is deprecated since API version 9. You are advised to use [replaceUrl<s
**Example** **Example**
```ts ```ts
class routerParams {
data1:string
constructor(str:string) {
this.data1 = str
}
}
router.replace({ router.replace({
url: 'pages/detail', url: 'pages/detail',
params: { params: new routerParams('message')
data1: 'message'
}
}); });
``` ```
......
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 2bd88a14
...@@ -48,7 +48,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -48,7 +48,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| vertical | boolean | Whether vertical swiping is used.<br>Default value: **false** | | vertical | boolean | Whether vertical swiping is used.<br>Default value: **false** |
| itemSpace | number \| string | Space between child components.<br>Default value: **0**<br>**NOTE**<br>This parameter cannot be set in percentage.| | itemSpace | number \| string | Space between child components.<br>Default value: **0**<br>**NOTE**<br>This parameter cannot be set in percentage.|
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**| | displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1**<br>**NOTE**<br>This attribute applies only when the **\<Swiper>** component uses [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).| | cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1**|
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** | | disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Linear**| | curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Linear**|
| indicatorStyle<sup>(deprecated)</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.<br>This API is supported since API version 8 and is deprecated since API version 10. You are advised to use [indicator](#indicator10) instead.| | indicatorStyle<sup>(deprecated)</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.<br>This API is supported since API version 8 and is deprecated since API version 10. You are advised to use [indicator](#indicator10) instead.|
...@@ -112,10 +112,10 @@ Defines the navigation point indicator of the dot style, which inherits attribut ...@@ -112,10 +112,10 @@ Defines the navigation point indicator of the dot style, which inherits attribut
| Name | Type | Mandatory. | Description | | Name | Type | Mandatory. | Description |
| ------------------ | ---------------------------------------- | ---- | ---------------------------------------- | | ------------------ | ---------------------------------------- | ---- | ---------------------------------------- |
| itemWidth | [Length](ts-types.md#length) | No | Width of the navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp| | itemWidth | [Length](ts-types.md#length) | No | Width of the navigation point indicator of the dot style. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp|
| itemHeight | [Length](ts-types.md#length) | No | Height of the navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp| | itemHeight | [Length](ts-types.md#length) | No | Height of the navigation point indicator of the dot style. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp|
| selectedItemWidth | [Length](ts-types.md#length) | No | Width of the selected navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp| | selectedItemWidth | [Length](ts-types.md#length) | No | Width of the selected navigation point indicator of the dot style. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp|
| selectedItemHeight | [Length](ts-types.md#length) | No | Height of the selected navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp| | selectedItemHeight | [Length](ts-types.md#length) | No | Height of the selected navigation point indicator of the dot style. This parameter cannot be set in percentage.<br>Default value: **6**<br>Unit: vp|
| mask | boolean | No | Whether to enable the mask for the navigation point indicator of the dot style.<br>Default value: **false**| | mask | boolean | No | Whether to enable the mask for the navigation point indicator of the dot style.<br>Default value: **false**|
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the navigation point indicator of the dot style.<br>Default value: **'\#182431'** (10% opacity)| | color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the navigation point indicator of the dot style.<br>Default value: **'\#182431'** (10% opacity)|
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the selected indicator dot.<br>Default value: **'\#007DFF'**| | selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the selected indicator dot.<br>Default value: **'\#007DFF'**|
...@@ -128,8 +128,8 @@ Defines the navigation point indicator of the digit style, which inherits attrib ...@@ -128,8 +128,8 @@ Defines the navigation point indicator of the digit style, which inherits attrib
| ----------------- | ---------------------------------------- | ---- | ---------------------------------------- | | ----------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**| | fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**|
| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the selected navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**| | selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the selected navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**|
| digitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the navigation point indicator of the digit style.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.| | digitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the navigation point indicator of the digit style.<br>\- **size**:font size. It cannot be set in percentage.<br>Default value: **14vp**<br>\- **weight**: font weight.|
| selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the selected navigation point indicator of the digit style.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.| | selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the selected navigation point indicator of the digit style.<br>\- **size**:font size. It cannot be set in percentage.<br>Default value: **14vp**<br>\- **weight**: font weight.|
## ArrowStyle<sup>10+</sup> ## ArrowStyle<sup>10+</sup>
Describes the left and right arrow attributes. Describes the left and right arrow attributes.
......
en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ 2bd88a14
...@@ -10,8 +10,8 @@ The area change event is triggered when the component's size, position, or any o ...@@ -10,8 +10,8 @@ The area change event is triggered when the component's size, position, or any o
## Events ## Events
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ---------------------------------------- | ---- | ---------------------------------------- | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) =&gt; void) | No | Triggered when the component area changes in size or position due to layout updates. This event is not triggered for render attribute changes caused by re-rendering, such as changes of **translate** and **offset**.| | onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) =&gt; void) | No | Triggered when the component area changes in size or position due to layout updates. This event is not triggered for render attribute changes caused by re-rendering, such as changes of **translate** and **offset**.<br>- [Area](ts-types.md#area8): returns the target width and height of the component and the target coordinates of the component relative to the parent component and the upper left corner of the page.|
## Example ## Example
......
en/application-dev/ui/arkts-graphics-display.md
浏览文件 @ 2bd88a14
...@@ -27,10 +27,12 @@ Data sources of the archived type can be classified into local resources, online ...@@ -27,10 +27,12 @@ Data sources of the archived type can be classified into local resources, online
- Local resources - Local resources
To load local images, create an **ets** folder and place the local images in any position in the folder. Then, in the **\<Image>** component, set **src** to the local image path, with the root directory being the **ets** folder. To load local images, create an **ets** folder and place the local images in any position in the folder.
Then, in the **\<Image>** component, set **src** to the local image path, with the root directory being the **ets** folder.
```ts ```ts
Image('images/view.jpg') Image('images/view.jpg')
.width(200) .width(200)
``` ```
...@@ -46,7 +48,7 @@ Image('images/view.jpg') ...@@ -46,7 +48,7 @@ Image('images/view.jpg')
**Resource** objects can be used to import images across bundles and modules. **Resource** objects can be used to import images across bundles and modules.
To load **Resource** objects, place images in the **resources** folder, which can then be read and converted to the **Resource** objects through **$r**. To load **Resource** objects, place images in the **resources** folder, which can be read and converted to the **Resource** objects through **$r**.
**Figure 1** resources folder **Figure 1** resources folder
...@@ -75,7 +77,6 @@ Image('images/view.jpg') ...@@ -75,7 +77,6 @@ Image('images/view.jpg')
To load images from the media library, use a path string that starts with **file://**. To load images from the media library, use a path string that starts with **file://**.
1. Call the API to obtain the image URL in the media library. 1. Call the API to obtain the image URL in the media library.
​
```ts ```ts
import picker from '@ohos.file.picker'; import picker from '@ohos.file.picker';
...@@ -85,7 +86,6 @@ Image('images/view.jpg') ...@@ -85,7 +86,6 @@ Image('images/view.jpg')
@State imgDatas: string[] = []; @State imgDatas: string[] = [];
// Obtain the image URL set. // Obtain the image URL set.
getAllImg() { getAllImg() {
let photoPicker = new picker.PhotoViewPicker();
let result = new Array<string>(); let result = new Array<string>();
try { try {
let PhotoSelectOptions = new picker.PhotoSelectOptions(); let PhotoSelectOptions = new picker.PhotoSelectOptions();
...@@ -121,8 +121,8 @@ Image('images/view.jpg') ...@@ -121,8 +121,8 @@ Image('images/view.jpg')
} }
} }
``` ```
2. Check the format of the URL obtained from the media library: 2. Check the format of the URL obtained from the media library:
​
```ts ```ts
Image('file://media/Photos/5') Image('file://media/Photos/5')
.width(200) .width(200)
...@@ -150,14 +150,12 @@ A pixel map is a pixel image obtained after image decoding. For details, see [Im ...@@ -150,14 +150,12 @@ A pixel map is a pixel image obtained after image decoding. For details, see [Im
Request an online image and implement transcoding to generate a pixel map. Request an online image and implement transcoding to generate a pixel map.
1. Reference the network and media library access permissions. 1. Reference the network and media library access permissions.
​
```ts ```ts
import http from '@ohos.net.http'; import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http'; import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image'; import image from '@ohos.multimedia.image';
``` ```
2. Enter the online image address. 2. Enter the online image address.
​
```ts ```ts
http.createHttp().request("https://www.example.com/xxx.png", http.createHttp().request("https://www.example.com/xxx.png",
(error, data) => { (error, data) => {
...@@ -169,24 +167,24 @@ A pixel map is a pixel image obtained after image decoding. For details, see [Im ...@@ -169,24 +167,24 @@ A pixel map is a pixel image obtained after image decoding. For details, see [Im
) )
``` ```
3. Transcode the data returned by the online image address to a pixel map. 3. Transcode the data returned by the online image address to a pixel map.
​
```ts ```ts
let code = data.responseCode; let code = data.responseCode;
if(ResponseCode.ResponseCode.OK === code) { if (ResponseCode.ResponseCode.OK === code) {
let imageSource = image.createImageSource(data.result); let res: any = data.result
let imageSource = image.createImageSource(res);
let options = { let options = {
alphaType: 0, // Alpha type. alphaType: 0, // Alpha type.
editable: false, // Whether the image is editable. editable: false, // Whether the image is editable.
pixelFormat: 3, // Pixel format. pixelFormat: 3, // Pixel format.
scaleMode: 1, // Scale mode. scaleMode: 1, // Scale mode.
size: {height: 100, width: 100} size: { height: 100, width: 100 }
} // Image size. } // Image size.
imageSource.createPixelMap(options).then((pixelMap) => { imageSource.createPixelMap(options).then((pixelMap) => {
this.image = pixelMap this.image = pixelMap
}) })
}
``` ```
4. Display the image. 4. Display the image.
​
```ts ```ts
Button ("Get Online Image") Button ("Get Online Image")
.onClick(() => { .onClick(() => {
......
en/application-dev/ui/arkts-layout-development-create-list.md
浏览文件 @ 2bd88a14
...@@ -46,7 +46,7 @@ When used in horizontal layout, the list can contain one or more scrollable rows ...@@ -46,7 +46,7 @@ When used in horizontal layout, the list can contain one or more scrollable rows
The main axis direction of a list refers to the direction in which the child component columns are laid out and in which the list scrolls. An axis perpendicular to the main axis is referred to as a cross axis, and the direction of the cross axis is perpendicular to a direction of the main axis. The main axis direction of a list refers to the direction in which the child component columns are laid out and in which the list scrolls. An axis perpendicular to the main axis is referred to as a cross axis, and the direction of the cross axis is perpendicular to a direction of the main axis.
As shown below, the main axis of a vertical list is in the vertical direction, and the cross axis is in the horizontal direction. The main axis of a horizontal list is in the horizontal direction, and the cross axis is in the horizontal direction. As shown below, the main axis of a vertical list is in the vertical direction, and the cross axis is in the horizontal direction. The main axis of a horizontal list is in the horizontal direction, and the cross axis is in the vertical direction.
**Figure 4** Main axis and cross axis of the list **Figure 4** Main axis and cross axis of the list
...@@ -615,7 +615,7 @@ struct MessageList { ...@@ -615,7 +615,7 @@ struct MessageList {
## Adding a Mark to a List Item ## Adding a Mark to a List Item
A mark is an intuitive, unintrusive visual indicator to draw attention and convey a specific message. For example, when a new message is received in the message list, a mark is displayed in the upper right corner of the contact's profile picture, indicating that there is a new message from that contact, as shown in the following figure. A mark is an intuitive, unobtrusive visual indicator to draw attention and convey a specific message. For example, when a new message is received in the message list, a mark is displayed in the upper right corner of the contact's profile picture, indicating that there is a new message from that contact, as shown in the following figure.
**Figure 16** Adding a mark to a list item **Figure 16** Adding a mark to a list item
......
en/application-dev/ui/arkts-layout-development-linear.md
浏览文件 @ 2bd88a14
...@@ -76,7 +76,7 @@ Row({ space: 35 }) { ...@@ -76,7 +76,7 @@ Row({ space: 35 }) {
In the layout container, use the **alignItems** attribute to set the alignment mode of child elements along the cross axis. The alignment performance is consistent across screens of various sizes. The value is of the [VerticalAlign Type](../reference/arkui-ts/ts-appendix-enums.md#verticalalign) type when the cross axis is in the vertical direction and the [HorizontalAlign](../reference/arkui-ts/ts-appendix-enums.md#horizontalalign) type when the cross axis is in the horizontal direction. In the layout container, use the **alignItems** attribute to set the alignment mode of child elements along the cross axis. The alignment performance is consistent across screens of various sizes. The value is of the [VerticalAlign Type](../reference/arkui-ts/ts-appendix-enums.md#verticalalign) type when the cross axis is in the vertical direction and the [HorizontalAlign](../reference/arkui-ts/ts-appendix-enums.md#horizontalalign) type when the cross axis is in the horizontal direction.
The layout container also provides the **alignSelf** attribute to control the alignment mode of a single child element along the main axis. This attribute has a higher priority than the **alignItems** attribute. This means that, if **alignSelf** is set, it will overwrite the **alignItems** setting on the corresponding child element. The layout container also provides the **alignSelf** attribute to control the alignment mode of a single child element along the cross axis. This attribute has a higher priority than the **alignItems** attribute. This means that, if **alignSelf** is set, it will overwrite the **alignItems** setting on the corresponding child element.
### Horizontal Alignment of Layout Child Elements in \<Column> Container ### Horizontal Alignment of Layout Child Elements in \<Column> Container
......
en/application-dev/ui/arkts-layout-development-relative-layout.md
浏览文件 @ 2bd88a14
...@@ -26,13 +26,13 @@ A child element does not necessarily adopt the dependency shown above to determi ...@@ -26,13 +26,13 @@ A child element does not necessarily adopt the dependency shown above to determi
### Setting the Anchor ### Setting the Anchor
By setting the anchor, you set a position dependency relationship between a child element and its parent element or sibling elements. In the horizontal direction, you can set the left, middle, and right anchors. In the vertical direction, you can set the top, center, and bottom anchors. To specify anchors, you must set IDs for the **\<RelativeContainer>** component and its child elements. The default ID is **container**. The ID is set through the **id** attribute. Child elements whose IDs are not set are not displayed in the **\<RelativeContainer>** component. By setting the anchor, you set a position dependency relationship between a child element and its parent element or sibling elements. In the horizontal direction, you can set the left, middle, and right anchors. In the vertical direction, you can set the top, center, and bottom anchors. To specify anchors, you must set IDs for the **\<RelativeContainer>** component and its child elements. The default ID is **__container__**. The ID is set through the **id** attribute. Child elements whose IDs are not set are not displayed in the **\<RelativeContainer>** component.
>**NOTE** >**NOTE**
> >
>When using anchors, pay attention to the relative positions of child elements to avoid misplacement or blocking. >When using anchors, pay attention to the relative positions of child elements to avoid misplacement or blocking.
- The ID of the **\<RelativeContainer>** parent component is **container**. - The ID of the **\<RelativeContainer>** parent component is **__container__**.
```ts ```ts
RelativeContainer() { RelativeContainer() {
...@@ -81,7 +81,7 @@ Alignment modes in the horizontal direction can be left, center, or right, achie ...@@ -81,7 +81,7 @@ Alignment modes in the horizontal direction can be left, center, or right, achie
![alignment-relative-anchor-horizontal](figures/alignment-relative-anchor-horizontal.png) ![alignment-relative-anchor-horizontal](figures/alignment-relative-anchor-horizontal.png)
Alignment modes in the vertical direction can be top, center, or bottom, achieved by the **HorizontalAlign.Top**, **HorizontalAlign.Center**, and **HorizontalAlign.Bottom** attributes, respectively. Alignment modes in the vertical direction can be top, center, or bottom, achieved by the **VerticalAlign.Top**, **VerticalAlign.Center**, and **VerticalAlign.Bottom** attributes, respectively.
![alignment-relative-anchor-vertical](figures/alignment-relative-anchor-vertical.png) ![alignment-relative-anchor-vertical](figures/alignment-relative-anchor-vertical.png)
...@@ -114,7 +114,7 @@ struct Index { ...@@ -114,7 +114,7 @@ struct Index {
.height(100).width(100) .height(100).width(100)
.alignRules({ .alignRules({
top: { anchor: 'row1', align: VerticalAlign.Bottom }, // Use row1 as the anchor and align with its bottom vertically. top: { anchor: 'row1', align: VerticalAlign.Bottom }, // Use row1 as the anchor and align with its bottom vertically.
left: { anchor: 'row1', align: HorizontalAlign.Start } // Use row1 as the anchor and align with its left horizontally. left: { anchor: 'row1', align: HorizontalAlign.Start } // Use row1 as the anchor and align with its start edge horizontally.
}) })
.id('row2') // Set the anchor to row2. .id('row2') // Set the anchor to row2.
......
en/application-dev/ui/arkts-performance-improvement-recommendation.md
浏览文件 @ 2bd88a14
...@@ -10,7 +10,7 @@ When developing a long list, use of loop rendering, as in the code snippet below ...@@ -10,7 +10,7 @@ When developing a long list, use of loop rendering, as in the code snippet below
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
@State arr: number[] = Array.from(Array(100), (v,k) =>k); // Construct an array of 0 to 99. @State arr: number[] = Array.from(Array<number>(100), (v,k) =>k); // Construct an array of 0 to 99.
build() { build() {
List() { List() {
ForEach(this.arr, (item: number) => { ForEach(this.arr, (item: number) => {
...@@ -33,8 +33,8 @@ class BasicDataSource implements IDataSource { ...@@ -33,8 +33,8 @@ class BasicDataSource implements IDataSource {
return 0 return 0
} }
public getData(index: number): any { public getData(index: number): string {
return undefined return ''
} }
registerDataChangeListener(listener: DataChangeListener): void { registerDataChangeListener(listener: DataChangeListener): void {
...@@ -90,7 +90,7 @@ class MyDataSource extends BasicDataSource { ...@@ -90,7 +90,7 @@ class MyDataSource extends BasicDataSource {
return this.dataArray.length return this.dataArray.length
} }
public getData(index: number): any { public getData(index: number): string {
return this.dataArray[index] return this.dataArray[index]
} }
...@@ -121,7 +121,7 @@ struct MyComponent { ...@@ -121,7 +121,7 @@ struct MyComponent {
.onClick(() => { .onClick(() => {
this.data.pushData('item value: ' + this.data.totalCount()) this.data.pushData('item value: ' + this.data.totalCount())
}) })
}, item => item) }, (item:string) => item)
} }
} }
} }
...@@ -155,8 +155,8 @@ class BasicDataSource implements IDataSource { ...@@ -155,8 +155,8 @@ class BasicDataSource implements IDataSource {
return 0 return 0
} }
public getData(index: number): any { public getData(index: number): string {
return undefined return ''
} }
registerDataChangeListener(listener: DataChangeListener): void { registerDataChangeListener(listener: DataChangeListener): void {
...@@ -212,7 +212,7 @@ class MyDataSource extends BasicDataSource { ...@@ -212,7 +212,7 @@ class MyDataSource extends BasicDataSource {
return this.dataArray.length return this.dataArray.length
} }
public getData(index: number): any { public getData(index: number): string {
return this.dataArray[index] return this.dataArray[index]
} }
...@@ -235,10 +235,10 @@ struct MyComponent { ...@@ -235,10 +235,10 @@ struct MyComponent {
build() { build() {
Scroll() { Scroll() {
List() { List() {
LazyForEach(this.data, (item: string, index: number) => { LazyForEach(this.data, (item: string, index?: number) => {
ListItem() { ListItem() {
Row() { Row() {
Text('item value: ' + item + (index + 1)).fontSize(20).margin(10) Text('item value: ' + item + (index as number + 1)).fontSize(20).margin(10)
} }
} }
}) })
...@@ -258,8 +258,8 @@ class BasicDataSource implements IDataSource { ...@@ -258,8 +258,8 @@ class BasicDataSource implements IDataSource {
return 0 return 0
} }
public getData(index: number): any { public getData(index: number): string {
return undefined return ''
} }
registerDataChangeListener(listener: DataChangeListener): void { registerDataChangeListener(listener: DataChangeListener): void {
...@@ -315,7 +315,7 @@ class MyDataSource extends BasicDataSource { ...@@ -315,7 +315,7 @@ class MyDataSource extends BasicDataSource {
return this.dataArray.length return this.dataArray.length
} }
public getData(index: number): any { public getData(index: number): string {
return this.dataArray[index] return this.dataArray[index]
} }
...@@ -338,9 +338,9 @@ struct MyComponent { ...@@ -338,9 +338,9 @@ struct MyComponent {
build() { build() {
Scroll() { Scroll() {
List() { List() {
LazyForEach(this.data, (item: string, index: number) => { LazyForEach(this.data, (item: string, index?: number) => {
ListItem() { ListItem() {
Text('item value: ' + item + (index + 1)).fontSize(20).margin(10) Text('item value: ' + item + (index as number + 1)).fontSize(20).margin(10)
}.width('100%') }.width('100%')
}) })
}.width('100%').height(500) }.width('100%').height(500)
...@@ -453,7 +453,7 @@ struct MyComponent { ...@@ -453,7 +453,7 @@ struct MyComponent {
build() { build() {
List() { List() {
LazyForEach(this.source, item => { LazyForEach(this.source, (item:number) => {
ListItem() { ListItem() {
Text("Hello" + item) Text("Hello" + item)
.fontSize(50) .fontSize(50)
...@@ -473,7 +473,7 @@ class MyDataSource implements IDataSource { ...@@ -473,7 +473,7 @@ class MyDataSource implements IDataSource {
return this.data.length return this.data.length
} }
public getData(index: number): any { public getData(index: number): number {
return this.data[index] return this.data[index]
} }
......
en/application-dev/ui/arkts-popup-and-menu-components-menu.md
浏览文件 @ 2bd88a14
...@@ -28,7 +28,7 @@ Button('click for Menu') ...@@ -28,7 +28,7 @@ Button('click for Menu')
## Creating a Menu in a Custom Style ## Creating a Menu in a Custom Style
If the default style does not meet requirements, you can use \@CustomBuilder to customize menu content. Menus can also be customized through the **bindMenu** API. If the default style does not meet requirements, you can use [\@Builder](../quick-start/arkts-builder.md) to customize menu content. You can also use the **bindMenu** API to bind a custom menu to a component.
### \@Builder: Customizing Menu Content ### \@Builder: Customizing Menu Content
...@@ -56,7 +56,7 @@ MyMenu(){ ...@@ -56,7 +56,7 @@ MyMenu(){
content: "Menu option", content: "Menu option",
endIcon: $r("app.media.arrow_right_filled"), endIcon: $r("app.media.arrow_right_filled"),
// When the builder parameter is set, it indicates that a submenu is bound to a menu item. When the user hovers the cursor over the menu item, the submenu is displayed. // When the builder parameter is set, it indicates that a submenu is bound to a menu item. When the user hovers the cursor over the menu item, the submenu is displayed.
builder: this.SubMenu.bind(this), builder: this.SubMenu,
}) })
MenuItemGroup ({ header: 'Subtitle' }) { MenuItemGroup ({ header: 'Subtitle' }) {
MenuItem ({ content: "Menu option" }) MenuItem ({ content: "Menu option" })
...@@ -70,7 +70,7 @@ MyMenu(){ ...@@ -70,7 +70,7 @@ MyMenu(){
startIcon: $r("app.media.view_list_filled"), startIcon: $r("app.media.view_list_filled"),
content: "Menu option", content: "Menu option",
endIcon: $r("app.media.arrow_right_filled"), endIcon: $r("app.media.arrow_right_filled"),
builder: this.SubMenu.bind(this) builder: this.SubMenu
}) })
} }
MenuItem({ MenuItem({
......
en/application-dev/ui/arkts-routing.md
浏览文件 @ 2bd88a14
...@@ -124,21 +124,25 @@ If you need to transfer data to the target page during redirection, you can add ...@@ -124,21 +124,25 @@ If you need to transfer data to the target page during redirection, you can add
```ts ```ts
class DataModelInfo { class DataModelInfo {
age: number; age: number;
constructor(age: number) {
this.age = age;
}
} }
class DataModel { class DataModel {
id: number; id: number;
info: DataModelInfo; info: DataModelInfo;
constructor(id: number, info: DataModelInfo) {
this.id = id;
this.info = info;
}
} }
function onJumpClick(): void { function onJumpClick(): void {
// On the Home page // On the Home page
let paramsInfo: DataModel = { let paramsInfo: DataModel = new DataModel(123, new DataModelInfo(20));
id: 123,
info: {
age: 20
}
};
router.pushUrl({ router.pushUrl({
url: 'pages/Detail', // Target URL. url: 'pages/Detail', // Target URL.
...@@ -157,9 +161,9 @@ On the target page, you can call the [getParams()](../reference/apis/js-apis-rou ...@@ -157,9 +161,9 @@ On the target page, you can call the [getParams()](../reference/apis/js-apis-rou
```ts ```ts
const params = router.getParams(); // Obtain the passed parameters. const params:DataModel = router.getParams() as DataModel; // Obtain the passed parameter object.
const id = params['id']; // Obtain the value of the id attribute. const id:number = params.id; // Obtain the value of the id attribute.
const age = params['info'].age; // Obtain the value of the age attribute. const age:number = params.info.age; // Obtain the value of the age attribute.
``` ```
...@@ -204,11 +208,17 @@ You can use any of the following methods to return to a page: ...@@ -204,11 +208,17 @@ You can use any of the following methods to return to a page:
```ts ```ts
class routerParam {
info: string;
constructor(info: string) {
this.info = info;
}
}
router.back({ router.back({
url: 'pages/Home', url: 'pages/Home',
params: { params: new routerParam ('From Home Page')
info:'From Home Page'
}
}); });
``` ```
...@@ -219,8 +229,8 @@ On the target page, call the **router.getParams()** API at the position where pa ...@@ -219,8 +229,8 @@ On the target page, call the **router.getParams()** API at the position where pa
```ts ```ts
onPageShow() { onPageShow() {
const params = router.getParams(); // Obtain the passed parameters. const params = router.getParams() as routerParam; // Obtain the passed parameter object.
const info = params['info']; // Obtain the value of the info attribute. const info = params.info; // Obtain the value of the info attribute.
} }
``` ```
...@@ -257,6 +267,8 @@ To enable the confirmation dialog box for page return, call the [router.showAler ...@@ -257,6 +267,8 @@ To enable the confirmation dialog box for page return, call the [router.showAler
```ts ```ts
import {BusinessError} from '@ohos.base';
// Define a click event processing function for the back button. // Define a click event processing function for the back button.
function onBackClick(): void { function onBackClick(): void {
// Invoke the router.showAlertBeforeBackPage() API to set the information about the confirmation dialog box. // Invoke the router.showAlertBeforeBackPage() API to set the information about the confirmation dialog box.
...@@ -265,7 +277,7 @@ function onBackClick(): void { ...@@ -265,7 +277,7 @@ function onBackClick(): void {
message: 'Payment not completed yet. Are you sure you want to return?' // Set the content of the confirmation dialog box. message: 'Payment not completed yet. Are you sure you want to return?' // Set the content of the confirmation dialog box.
}); });
} catch (err) { } catch (err) {
console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`); console.error(`Invoke showAlertBeforeBackPage failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
} }
// Invoke the router.back() API to return to the previous page. // Invoke the router.back() API to return to the previous page.
...@@ -276,7 +288,7 @@ function onBackClick(): void { ...@@ -276,7 +288,7 @@ function onBackClick(): void {
The **router.showAlertBeforeBackPage()** API receives an object as a parameter. The object contains the following attributes: The **router.showAlertBeforeBackPage()** API receives an object as a parameter. The object contains the following attributes:
**message**: content of the dialog box. The value is of the string type. **message**: content of the dialog box. The value is of the string type.
If the API is successfully called, the confirmation dialog box is displayed on the target page. Otherwise, an exception is thrown and the error code and error information is obtained through **err.code** and **err.message**. If the API is called successfully, the confirmation dialog box is displayed on the target page. Otherwise, an exception is thrown and the error code and error information is obtained through **err.code** and **err.message**.
When the user clicks the back button, a confirmation dialog box is displayed, prompting the user to confirm their operation. If the user selects Cancel, the application stays on the current page. If the user selects OK, the **router.back()** API is triggered and the redirection is performed based on the parameters. When the user clicks the back button, a confirmation dialog box is displayed, prompting the user to confirm their operation. If the user selects Cancel, the application stays on the current page. If the user selects OK, the **router.back()** API is triggered and the redirection is performed based on the parameters.
...@@ -295,6 +307,9 @@ In the event callback, call the [promptAction.showDialog()](../reference/apis/js ...@@ -295,6 +307,9 @@ In the event callback, call the [promptAction.showDialog()](../reference/apis/js
```ts ```ts
import { BusinessError } from '@ohos.base';
import promptAction from '@ohos.promptAction';
function onBackClick() { function onBackClick() {
// Display a custom confirmation dialog box. // Display a custom confirmation dialog box.
promptAction.showDialog({ promptAction.showDialog({
...@@ -319,7 +334,7 @@ function onBackClick() { ...@@ -319,7 +334,7 @@ function onBackClick() {
// Invoke the router.back() API to return to the previous page. // Invoke the router.back() API to return to the previous page.
router.back(); router.back();
} }
}).catch((err) => { }).catch((err:BusinessError) => {
console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`); console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);
}) })
} }
...@@ -342,6 +357,7 @@ In the target page in the [shared package](../quick-start/shared-guide.md), name ...@@ -342,6 +357,7 @@ In the target page in the [shared package](../quick-start/shared-guide.md), name
```ts ```ts
// library/src/main/ets/pages/Index.ets // library/src/main/ets/pages/Index.ets
// library is the custom name of the new shared package.
@Entry({ routeName : 'myPage' }) @Entry({ routeName : 'myPage' })
@Component @Component
struct MyComponent { struct MyComponent {
...@@ -353,7 +369,26 @@ When the configuration is successful, import the named route page to the page fr ...@@ -353,7 +369,26 @@ When the configuration is successful, import the named route page to the page fr
```ts ```ts
// entry/src/main/ets/pages/Index.ets // entry/src/main/ets/pages/Index.ets
import router from '@ohos.router'; import router from '@ohos.router';
import 'library/src/main/ets/Index.ets' // Import the named route page from the shared package library. import'library/src/main/ets/pages/Index' // Import the named route page from the library of the shared package.
import { BusinessError } from '@ohos.base';
class innerParams {
data3: number[];
constructor(tuple: number[]) {
this.data3 = tuple;
}
}
class routerParams {
data1: string;
data2: innerParams;
constructor(data1: string, data2: number[]) {
this.data1 = data1;
this.data2 = new innerParams(data2);
}
}
@Entry @Entry
@Component @Component
...@@ -369,15 +404,10 @@ struct Index { ...@@ -369,15 +404,10 @@ struct Index {
try { try {
router.pushNamedRoute({ router.pushNamedRoute({
name: 'myPage', name: 'myPage',
params: { params: new routerParams('message', [123, 456, 789])
data1: 'message',
data2: {
data3: [123, 456, 789]
}
}
}) })
} catch (err) { } catch (err) {
console.error(`pushNamedRoute failed, code is ${err.code}, message is ${err.message}`); console.error(`pushNamedRoute failed, code is ${(err as BusinessError).code}, message is ${(err as BusinessError).message}`);
} }
}) })
} }
......
en/application-dev/ui/arkts-shared-element-transition.md
浏览文件 @ 2bd88a14
...@@ -86,7 +86,7 @@ export struct share_transition_expand { ...@@ -86,7 +86,7 @@ export struct share_transition_expand {
build() { build() {
Column() { Column() {
List() { List() {
ForEach(this.listArray, (item, index) => { ForEach(this.listArray, (item:number, index) => {
// Customize the expanded component as required. // Customize the expanded component as required.
if (!this.isExpand || this.curIndex == index) { if (!this.isExpand || this.curIndex == index) {
ListItem() { ListItem() {
...@@ -128,7 +128,7 @@ export struct share_transition_expand { ...@@ -128,7 +128,7 @@ export struct share_transition_expand {
.onClick(() => { .onClick(() => {
// Define the animation parameters for expanding and collapsing. // Define the animation parameters for expanding and collapsing.
animateTo({ curve: curves.springMotion(0.6, 0.9) }, () => { animateTo({ curve: curves.springMotion(0.6, 0.9) }, () => {
this.curIndex = index; this.curIndex = index as number;
this.isExpand = !this.isExpand; this.isExpand = !this.isExpand;
}) })
}) })
...@@ -216,12 +216,12 @@ export struct share_zIndex_expand { ...@@ -216,12 +216,12 @@ export struct share_zIndex_expand {
@Link isExpand: boolean; @Link isExpand: boolean;
@Link curIndex: number; @Link curIndex: number;
@State listArray: Array<number> = [1, 2, 3, 4, 5, 6]; @State listArray: Array<number> = [1, 2, 3, 4, 5, 6];
private parentScroller: Scroller; // Upper-layer scroller controller. private parentScroller: Scroller = new Scroller(); // Upper-layer scroller
build() { build() {
Column() { Column() {
List() { List() {
ForEach(this.listArray, (item, index) => { ForEach(this.listArray, (item: number, index) => {
// Customize the expanded component as required. // Customize the expanded component as required.
if (!this.isExpand || this.curIndex == index) { if (!this.isExpand || this.curIndex == index) {
ListItem() { ListItem() {
...@@ -271,7 +271,7 @@ export struct share_zIndex_expand { ...@@ -271,7 +271,7 @@ export struct share_zIndex_expand {
.onClick(() => { .onClick(() => {
// Define the animation parameters for expanding and collapsing. // Define the animation parameters for expanding and collapsing.
animateTo({ curve: curves.springMotion(0.6, 0.9) }, () => { animateTo({ curve: curves.springMotion(0.6, 0.9) }, () => {
this.curIndex = index; this.curIndex = index as number;
this.isExpand = !this.isExpand; this.isExpand = !this.isExpand;
}) })
}) })
...@@ -540,7 +540,7 @@ struct AutoAchieveShareTransitionDemo { ...@@ -540,7 +540,7 @@ struct AutoAchieveShareTransitionDemo {
Stack() { Stack() {
Scroll() { Scroll() {
Column({ space: 20 }) { Column({ space: 20 }) {
ForEach(this.items, (item, index) => { ForEach(this.items, (item:string, index) => {
Row() { Row() {
Column() { Column() {
Text('Shared element ' + item) Text('Shared element ' + item)
...@@ -567,15 +567,7 @@ struct AutoAchieveShareTransitionDemo { ...@@ -567,15 +567,7 @@ struct AutoAchieveShareTransitionDemo {
.onClick(() => { .onClick(() => {
// Obtain the position and size of the corresponding component. // Obtain the position and size of the corresponding component.
let strJson = getInspectorByKey(item); let strJson = getInspectorByKey(item);
let obj = JSON.parse(strJson); let rect_top:number = JSON.parse('[' + JSON.parse('[' + JSON.parse(strJson).$rect + ']')[0] + ']')[1];
let rectInfo = JSON.parse('[' + obj.$rect + ']');
let rect_left = JSON.parse('[' + rectInfo[0] + ']')[0];
let rect_top = JSON.parse('[' + rectInfo[0] + ']')[1];
let rect_right = JSON.parse('[' + rectInfo[1] + ']')[0];
let rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1];
let rect_value = {
"left": rect_left, "top": rect_top, "right": rect_right, "bottom": rect_bottom
};
// Set the location, content, and status of the shared element. // Set the location, content, and status of the shared element.
this.rect_top = rect_top; this.rect_top = rect_top;
......
en/application-dev/ui/arkts-spring-curve.md
浏览文件 @ 2bd88a14
# Spring Curve # Spring Curve
In a damped spring system corresponding to a damped spring curve (spring curve for short), an object that deviates from the equilibrium position is forced to oscillate due to a reverse force generated by spring deformation; this oscillation is resisted by the damping force. Except for the special case where the damping is 0, the oscillation gradually decays in amplitude towards 0, and the resultant animation curve is naturally continuous. In a damped spring system corresponding to a damped spring curve (spring curve for short), an object that deviates from the equilibrium position is forced to oscillate due to a reverse force generated by spring deformation; this oscillation is resisted by the damping force. Except for the special case where the damping is 0, the oscillation gradually decays in amplitude towards 0, and the resultant animation curve is natural and continuous.
An animation using the spring curve slows down toward the end where the velocity of 0, instead of stopping abruptly. An animation using the spring curve slows down toward the end until the velocity is 0, instead of stopping abruptly.
ArkUI provides four types of damped spring curve APIs: ArkUI provides four types of damped spring curve APIs:
...@@ -19,7 +19,7 @@ ArkUI provides four types of damped spring curve APIs: ...@@ -19,7 +19,7 @@ ArkUI provides four types of damped spring curve APIs:
- [responsiveSpringMotion](../reference/apis/js-apis-curve.md#curvesresponsivespringmotion9): creates a responsive spring animation curve. It is a special case of **springMotion**, with the only difference in the default values. It is typically used to create an animation with a gesture on the screen. You can use **springMotion** to create an animation for when the user lifts their finger off the screen. The created animation automatically inherits the previous velocity for animation transition. - [responsiveSpringMotion](../reference/apis/js-apis-curve.md#curvesresponsivespringmotion9): creates a responsive spring animation curve. It is a special case of **springMotion**, with the only difference in the default values. It is typically used to create an animation with a gesture on the screen. You can use **springMotion** to create an animation for when the user lifts their finger off the screen. The created animation automatically inherits the previous velocity for animation transition.
When the **overlapDuration** parameter of the new animation is not **0** and the previous spring animation of the current attribute is not yet complete, **response** and **dampingFracion** transit from the values of the previous animation to that of the new animation within the period specified by **overlapDuration**. When the **overlapDuration** parameter of the new animation is not **0** and the previous spring animation of the current attribute is not yet complete, **response** and **dampingFracion** transit, over the period specified by **overlapDuration**, from the values of the previous animation to that of the new animation.
```ts ```ts
...@@ -46,6 +46,10 @@ ArkUI provides four types of damped spring curve APIs: ...@@ -46,6 +46,10 @@ ArkUI provides four types of damped spring curve APIs:
The following shows a complete example and effect of spring curves. For details about how to connect gestures and animations, see [Animation Smoothing](arkts-animation-smoothing.md). The following shows a complete example and effect of spring curves. For details about how to connect gestures and animations, see [Animation Smoothing](arkts-animation-smoothing.md).
```ts ```ts
import curves from '@ohos.curves'; import curves from '@ohos.curves';
...@@ -64,10 +68,10 @@ class Spring { ...@@ -64,10 +68,10 @@ class Spring {
// Spring component // Spring component
@Component @Component
struct Motion { struct Motion {
@Prop dRotate: number @Prop dRotate: number = 0
private title: string private title: string = ''
private subTitle: string private subTitle: string = ''
private iCurve: ICurve private iCurve: ICurve = curves.initCurve()
build() { build() {
Row() { Row() {
...@@ -130,11 +134,17 @@ struct Motion { ...@@ -130,11 +134,17 @@ struct Motion {
@Component @Component
export struct SpringDemo { export struct SpringDemo {
@State dRotate: number = 0; @State dRotate: number = 0;
private curvelist: ICurve[] = [
curves.springMotion(1, 0.25),
curves.responsiveSpringMotion(1, 0.25),
curves.interpolatingSpring(10, 1, 228, 30),
curves.springCurve(10, 1, 228, 30)
];
private springs: Spring[] = [ private springs: Spring[] = [
new Spring('springMotion()', '(springMotion(1, 0.25): \n\nCycle: 2; damping: 0.25)', curves.springMotion(1, 0.25)), new Spring('springMotion()', '(springMotion (1, 0.25): \n\nCycle: 2; damping: 0.25)', this.curvelist[0]),
new Spring('responsiveSpringMotion()', 'responsiveSpringMotion(1, 0.25): \n\nDefault responsive spring curve', curves.responsiveSpringMotion(1, 0.25)), new Spring('responsiveSpringMotion()', 'responsiveSpringMotion(1, 0.25): \n\nDefault responsive spring curve', this.curvelist[1]),
new Spring('interpolatingSpring()', '(interpolatingSpring(10, 1, 228, 30): \n\nInitial velocity: 100; quality: 1; stiffness: 228; damping: 30)', curves.interpolatingSpring(10, 1, 228, 30)), new Spring('interpolatingSpring()', '(interpolatingSpring(10, 1, 228, 30): \n\nInitial velocity: 100; quality: 1; stiffness: 228; damping: 30)', this.curvelist[2]),
new Spring('springCurve()', '(springCurve(10, 1, 228, 30): \n\nInitial velocity: 100; quality: 1; stiffness: 228; damping: 30)', curves.springCurve(10, 1, 228, 30)) new Spring('springCurve()', '(springCurve(10, 1, 228, 30): \n\nInitial velocity: 100; quality: 1; stiffness: 228; damping: 30)', this.curvelist[3])
]; ];
build() { build() {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或