未验证 提交 cb277bf6 编写于 作者: O openharmony_ci 提交者: Gitee

!23771 arkts 告警清理

Merge pull request !23771 from 耿文广/master
...@@ -34,34 +34,34 @@ ...@@ -34,34 +34,34 @@
- 用父组件自定义构建函数初始化子组件\@BuildParam装饰的方法。 - 用父组件自定义构建函数初始化子组件\@BuildParam装饰的方法。
```ts ```ts
@Component @Component
struct Child { struct Child {
@Builder componentBuilder() { @Builder componentBuilder() {
Text(`Parent builder `) Text(`Parent builder `)
} }
@BuilderParam aBuilder0: () => void = this.componentBuilder; @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 `)
} }
build() { build() {
Column() { Column() {
Child({ aBuilder0: this.componentBuilder }) Child({ aBuilder0: this.componentBuilder })
}
} }
} }
}
``` ```
...@@ -74,40 +74,40 @@ struct Parent { ...@@ -74,40 +74,40 @@ struct Parent {
> 开发者谨慎使用bind改变函数调用的上下文,可能会使this指向混乱。 > 开发者谨慎使用bind改变函数调用的上下文,可能会使this指向混乱。
```ts ```ts
@Component @Component
struct Child { struct Child {
@Builder componentBuilder() { @Builder componentBuilder() {
Text(`Child builder `) Text(`Child builder `)
} }
label: string = `Child` label: string = `Child`
@BuilderParam aBuilder0: () => void = this.componentBuilder; @BuilderParam aBuilder0: () => void = this.componentBuilder;
@BuilderParam aBuilder1: () => void = this.componentBuilder; @BuilderParam aBuilder1: () => void = this.componentBuilder;
build() { build() {
Column() { Column() {
this.aBuilder0() this.aBuilder0()
this.aBuilder1() this.aBuilder1()
}
} }
} }
}
@Entry @Entry
@Component @Component
struct Parent { struct Parent {
label: string = `Parent` label: string = `Parent`
@Builder componentBuilder() { @Builder componentBuilder() {
Text(`${this.label}`) Text(`${this.label}`)
} }
build() { build() {
Column() { Column() {
this.componentBuilder() this.componentBuilder()
Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder }) Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder })
}
} }
} }
}
``` ```
......
...@@ -191,37 +191,37 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49 ...@@ -191,37 +191,37 @@ link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
- \@LocalStorageLink绑定LocalStorage对给定的属性,建立双向数据同步。 - \@LocalStorageLink绑定LocalStorage对给定的属性,建立双向数据同步。
```ts ```ts
// 创建新实例并使用给定对象初始化 // 创建新实例并使用给定对象初始化
let storage = new LocalStorage(); let storage = new LocalStorage();
storage['PropA'] = 47; storage['PropA'] = 47;
@Component @Component
struct Child { struct Child {
// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定 // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
@LocalStorageLink('PropA') storLink2: number = 1; @LocalStorageLink('PropA') storLink2: number = 1;
build() { build() {
Button(`Child from LocalStorage ${this.storLink2}`) Button(`Child from LocalStorage ${this.storLink2}`)
// 更改将同步至LocalStorage中的'PropA'以及Parent.storLink1 // 更改将同步至LocalStorage中的'PropA'以及Parent.storLink1
.onClick(() => this.storLink2 += 1) .onClick(() => this.storLink2 += 1)
}
} }
} // 使LocalStorage可从@Component组件访问
// 使LocalStorage可从@Component组件访问 @Entry(storage)
@Entry(storage) @Component
@Component struct CompA {
struct CompA { // @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
// @LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定 @LocalStorageLink('PropA') storLink1: number = 1;
@LocalStorageLink('PropA') storLink1: number = 1;
build() {
build() { Column({ space: 15 }) {
Column({ space: 15 }) { Button(`Parent from LocalStorage ${this.storLink1}`) // initial value from LocalStorage will be 47, because 'PropA' initialized already
Button(`Parent from LocalStorage ${this.storLink1}`) // initial value from LocalStorage will be 47, because 'PropA' initialized already .onClick(() => this.storLink1 += 1)
.onClick(() => this.storLink1 += 1) // @Component子组件自动获得对CompA LocalStorage实例的访问权限。
// @Component子组件自动获得对CompA LocalStorage实例的访问权限。 Child()
Child() }
} }
} }
}
``` ```
...@@ -234,39 +234,39 @@ struct CompA { ...@@ -234,39 +234,39 @@ struct CompA {
- Child组件中,Text绑定的storProp2 依旧显示47。 - Child组件中,Text绑定的storProp2 依旧显示47。
```ts ```ts
// 创建新实例并使用给定对象初始化 // 创建新实例并使用给定对象初始化
let storage = new LocalStorage(); let storage = new LocalStorage();
storage['PropA'] = 47; storage['PropA'] = 47;
// 使LocalStorage可从@Component组件访问 // 使LocalStorage可从@Component组件访问
@Entry(storage) @Entry(storage)
@Component @Component
struct CompA { struct CompA {
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定 // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
@LocalStorageProp('PropA') storProp1: number = 1; @LocalStorageProp('PropA') storProp1: number = 1;
build() { build() {
Column({ space: 15 }) { Column({ space: 15 }) {
// 点击后从47开始加1,只改变当前组件显示的storProp1,不会同步到LocalStorage中 // 点击后从47开始加1,只改变当前组件显示的storProp1,不会同步到LocalStorage中
Button(`Parent from LocalStorage ${this.storProp1}`) Button(`Parent from LocalStorage ${this.storProp1}`)
.onClick(() => this.storProp1 += 1) .onClick(() => this.storProp1 += 1)
Child() Child()
}
} }
} }
}
@Component @Component
struct Child { struct Child {
// @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定 // @LocalStorageProp变量装饰器与LocalStorage中的'PropA'属性建立单向绑定
@LocalStorageProp('PropA') storProp2: number = 2; @LocalStorageProp('PropA') storProp2: number = 2;
build() { build() {
Column({ space: 15 }) { Column({ space: 15 }) {
// 当CompA改变时,当前storProp2不会改变,显示47 // 当CompA改变时,当前storProp2不会改变,显示47
Text(`Parent from LocalStorage ${this.storProp2}`) Text(`Parent from LocalStorage ${this.storProp2}`)
}
} }
} }
}
``` ```
......
...@@ -125,7 +125,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 ...@@ -125,7 +125,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
```ts ```ts
@Component @Component
struct LinkLinkChild { struct LinkLinkChild {
@Link @Watch("testNumChange") testNumGrand: number; @Link @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void { testNumChange(propName: string): void {
console.log(`LinkLinkChild: testNumGrand value ${this.testNumGrand}`); console.log(`LinkLinkChild: testNumGrand value ${this.testNumGrand}`);
...@@ -139,7 +139,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 ...@@ -139,7 +139,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
@Component @Component
struct PropLinkChild { struct PropLinkChild {
@Prop @Watch("testNumChange") testNumGrand: number; @Prop @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void { testNumChange(propName: string): void {
console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`); console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`);
...@@ -175,7 +175,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 ...@@ -175,7 +175,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
```ts ```ts
@Component @Component
struct LinkLinkChild { struct LinkLinkChild {
@Link @Watch("testNumChange") testNumGrand: number; @Link @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void { testNumChange(propName: string): void {
console.log(`LinkLinkChild: testNumGrand value ${this.testNumGrand}`); console.log(`LinkLinkChild: testNumGrand value ${this.testNumGrand}`);
...@@ -189,7 +189,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 ...@@ -189,7 +189,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
@Component @Component
struct PropLinkChild { struct PropLinkChild {
@Prop @Watch("testNumChange") testNumGrand: number; @Prop @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void { testNumChange(propName: string): void {
console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`); console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`);
...@@ -277,7 +277,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量 ...@@ -277,7 +277,7 @@ ViewModel通常包含多个顶层数据源。\@State和\@Provide装饰的变量
```ts ```ts
@Component @Component
struct LinkLinkChild { struct LinkLinkChild {
@Consume @Watch("testNumChange") testNum: number; @Consume @Watch("testNumChange") testNum: number = 0;
testNumChange(propName: string): void { testNumChange(propName: string): void {
console.log(`LinkLinkChild: testNum value ${this.testNum}`); console.log(`LinkLinkChild: testNum value ${this.testNum}`);
...@@ -290,7 +290,7 @@ struct LinkLinkChild { ...@@ -290,7 +290,7 @@ struct LinkLinkChild {
@Component @Component
struct PropLinkChild { struct PropLinkChild {
@Prop @Watch("testNumChange") testNumGrand: number; @Prop @Watch("testNumChange") testNumGrand: number = 0;
testNumChange(propName: string): void { testNumChange(propName: string): void {
console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`); console.log(`PropLinkChild: testNumGrand value ${this.testNumGrand}`);
...@@ -609,7 +609,7 @@ struct Parent { ...@@ -609,7 +609,7 @@ struct Parent {
```ts ```ts
@Observed class ObservedArray<T> extends Array<T> { @Observed class ObservedArray<T> extends Array<T> {
constructor(args: any[]) { constructor(args: T[]) {
super(...args); super(...args);
} }
/* otherwise empty */ /* otherwise empty */
...@@ -686,10 +686,10 @@ struct ViewB { ...@@ -686,10 +686,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()
) )
Divider().height(10) Divider().height(10)
...@@ -875,9 +875,9 @@ export class Person { ...@@ -875,9 +875,9 @@ export class Person {
```ts ```ts
@Observed @Observed
export class ObservedArray<T> extends Array<T> { export class ObservedArray<T> extends Array<T> {
constructor(args?: any[]) { constructor(args: T[]) {
console.log(`ObservedArray: ${JSON.stringify(args)} `) console.log(`ObservedArray: ${JSON.stringify(args)} `)
if (Array.isArray(args)) { if (args instanceof Array) {
super(...args); super(...args);
} else { } else {
super(args) super(args)
...@@ -916,13 +916,12 @@ export class ObservedArray<T> extends Array<T> { ...@@ -916,13 +916,12 @@ export class ObservedArray<T> extends Array<T> {
Divider().height(8) Divider().height(8)
ForEach(this.contacts, ForEach(this.contacts, (contact: Person) => {
contact => { PersonView({ person: contact, phones: contact.phones as ObservedArray<string>, selectedPerson: this.$selectedPerson })
PersonView({person: contact, phones: contact.phones, selectedPerson: this.$selectedPerson}) },
}, (contact: Person) => contact.id_
contact => contact.id_ )
)
Divider().height(8) Divider().height(8)
Text("Edit:") Text("Edit:")
...@@ -971,7 +970,7 @@ export class ObservedArray<T> extends Array<T> { ...@@ -971,7 +970,7 @@ export class ObservedArray<T> extends Array<T> {
build() { build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Text(this.person.name) Text(this.person.name)
if (this.phones.length) { if (this.phones.length > 0) {
Text(this.phones[0]) Text(this.phones[0])
} }
} }
...@@ -1005,12 +1004,12 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1005,12 +1004,12 @@ export class ObservedArray<T> extends Array<T> {
@Link selectedPerson: Person; @Link selectedPerson: Person;
/*在本地副本上编辑,直到点击保存*/ /*在本地副本上编辑,直到点击保存*/
@Prop name: string; @Prop name: string = "";
@Prop address : Address; @Prop address : Address = new Address("", 0, "");
@Prop phones : ObservedArray<string>; @Prop phones : ObservedArray<string> = [];
selectedPersonIndex() : number { selectedPersonIndex() : number {
return this.addrBook.contacts.findIndex((person) => person.id_ == this.selectedPerson.id_); return this.addrBook.contacts.findIndex((person: Person) => person.id_ == this.selectedPerson.id_);
} }
build() { build() {
...@@ -1031,24 +1030,24 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1031,24 +1030,24 @@ export class ObservedArray<T> extends Array<T> {
TextInput({text: this.address.zip.toString()}) TextInput({text: this.address.zip.toString()})
.onChange((value) => { .onChange((value) => {
const result = parseInt(value); const result = Number.parseInt(value);
this.address.zip= isNaN(result) ? 0 : result; this.address.zip= Number.isNaN(result) ? 0 : result;
}) })
if(this.phones.length>0) { if (this.phones.length > 0) {
ForEach(this.phones, ForEach(this.phones,
(phone, index) => { (phone: ResourceStr, index?:number) => {
TextInput({text: phone}) TextInput({ text: phone })
.width(150) .width(150)
.onChange((value) => { .onChange((value) => {
console.log(`${index}. ${value} value has changed`) console.log(`${index}. ${value} value has changed`)
this.phones[index] = value; this.phones[index!] = value;
}) })
}, },
(phone, index) => `${index}-${phone}` (phone: ResourceStr, index?:number) => `${index}-${phone}`
) )
} }
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Text("Save Changes") Text("Save Changes")
.onClick(() => { .onClick(() => {
...@@ -1103,25 +1102,25 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1103,25 +1102,25 @@ export class ObservedArray<T> extends Array<T> {
// ViewModel classes // ViewModel classes
let nextId = 0; let nextId = 0;
@Observed @Observed
export class ObservedArray<T> extends Array<T> { export class ObservedArray<T> extends Array<T> {
constructor(args?: any[]) { constructor(args: T[]) {
console.log(`ObservedArray: ${JSON.stringify(args)} `) console.log(`ObservedArray: ${JSON.stringify(args)} `)
if (Array.isArray(args)) { if (args instanceof Array) {
super(...args); super(...args);
} else { } else {
super(args) super(args)
} }
} }
} }
@Observed @Observed
export class Address { export class Address {
street: string; street: string;
zip: number; zip: number;
city: string; city: string;
constructor(street: string, constructor(street: string,
zip: number, zip: number,
city: string) { city: string) {
...@@ -1130,14 +1129,14 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1130,14 +1129,14 @@ export class ObservedArray<T> extends Array<T> {
this.city = city; this.city = city;
} }
} }
@Observed @Observed
export class Person { export class Person {
id_: string; id_: string;
name: string; name: string;
address: Address; address: Address;
phones: ObservedArray<string>; phones: ObservedArray<string>;
constructor(name: string, constructor(name: string,
street: string, street: string,
zip: number, zip: number,
...@@ -1154,13 +1153,13 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1154,13 +1153,13 @@ export class ObservedArray<T> extends Array<T> {
export class AddressBook { export class AddressBook {
me: Person; me: Person;
contacts: ObservedArray<Person>; contacts: ObservedArray<Person>;
constructor(me: Person, contacts: Person[]) { constructor(me: Person, contacts: Person[]) {
this.me = me; this.me = me;
this.contacts = new ObservedArray<Person>(contacts); this.contacts = new ObservedArray<Person>(contacts);
} }
} }
//渲染出Person对象的名称和Observed数组<string>中的第一个号码 //渲染出Person对象的名称和Observed数组<string>中的第一个号码
//为了更新电话号码,这里需要@ObjectLink person和@ObjectLink phones, //为了更新电话号码,这里需要@ObjectLink person和@ObjectLink phones,
//不能使用this.person.phones,内部数组的更改不会被观察到。 //不能使用this.person.phones,内部数组的更改不会被观察到。
...@@ -1170,7 +1169,7 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1170,7 +1169,7 @@ export class ObservedArray<T> extends Array<T> {
@ObjectLink person: Person; @ObjectLink person: Person;
@ObjectLink phones: ObservedArray<string>; @ObjectLink phones: ObservedArray<string>;
@Link selectedPerson: Person; @Link selectedPerson: Person;
build() { build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Text(this.person.name) Text(this.person.name)
...@@ -1185,26 +1184,26 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1185,26 +1184,26 @@ export class ObservedArray<T> extends Array<T> {
}) })
} }
} }
// 渲染Person的详细信息 // 渲染Person的详细信息
// @Prop装饰的变量从父组件AddressBookView深拷贝数据,将变化保留在本地, TextInput的变化只会在本地副本上进行修改。 // @Prop装饰的变量从父组件AddressBookView深拷贝数据,将变化保留在本地, TextInput的变化只会在本地副本上进行修改。
// 点击 "Save Changes" 会将所有数据的复制通过@Prop到@Link, 同步到其他组件 // 点击 "Save Changes" 会将所有数据的复制通过@Prop到@Link, 同步到其他组件
@Component @Component
struct PersonEditView { struct PersonEditView {
@Consume addrBook: AddressBook; @Consume addrBook: AddressBook;
/* 指向父组件selectedPerson的引用 */ /* 指向父组件selectedPerson的引用 */
@Link selectedPerson: Person; @Link selectedPerson: Person;
/*在本地副本上编辑,直到点击保存*/ /*在本地副本上编辑,直到点击保存*/
@Prop name: string; @Prop name: string = "";
@Prop address: Address; @Prop address: Address = new Address("", 0, "");
@Prop phones: ObservedArray<string>; @Prop phones: ObservedArray<string> = [];
selectedPersonIndex(): number { selectedPersonIndex(): number {
return this.addrBook.contacts.findIndex((person) => person.id_ == this.selectedPerson.id_); return this.addrBook.contacts.findIndex((person: Person) => person.id_ == this.selectedPerson.id_);
} }
build() { build() {
Column() { Column() {
TextInput({ text: this.name }) TextInput({ text: this.name })
...@@ -1215,32 +1214,32 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1215,32 +1214,32 @@ export class ObservedArray<T> extends Array<T> {
.onChange((value) => { .onChange((value) => {
this.address.street = value; this.address.street = value;
}) })
TextInput({ text: this.address.city }) TextInput({ text: this.address.city })
.onChange((value) => { .onChange((value) => {
this.address.city = value; this.address.city = value;
}) })
TextInput({ text: this.address.zip.toString() }) TextInput({ text: this.address.zip.toString() })
.onChange((value) => { .onChange((value) => {
const result = parseInt(value); const result = Number.parseInt(value);
this.address.zip = isNaN(result) ? 0 : result; this.address.zip = Number.isNaN(result) ? 0 : result;
}) })
if (this.phones.length > 0) { if (this.phones.length > 0) {
ForEach(this.phones, ForEach(this.phones,
(phone, index) => { (phone: ResourceStr, index?:number) => {
TextInput({ text: phone }) TextInput({ text: phone })
.width(150) .width(150)
.onChange((value) => { .onChange((value) => {
console.log(`${index}. ${value} value has changed`) console.log(`${index}. ${value} value has changed`)
this.phones[index] = value; this.phones[index!] = value;
}) })
}, },
(phone, index) => `${index}-${phone}` (phone: ResourceStr, index?:number) => `${index}-${phone}`
) )
} }
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
Text("Save Changes") Text("Save Changes")
.onClick(() => { .onClick(() => {
...@@ -1259,49 +1258,48 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1259,49 +1258,48 @@ export class ObservedArray<T> extends Array<T> {
.onClick(() => { .onClick(() => {
let index = this.selectedPersonIndex(); let index = this.selectedPersonIndex();
console.log(`delete contact at index ${index}`); console.log(`delete contact at index ${index}`);
// 删除当前联系人 // 删除当前联系人
this.addrBook.contacts.splice(index, 1); this.addrBook.contacts.splice(index, 1);
// 删除当前selectedPerson,选中态前移一位 // 删除当前selectedPerson,选中态前移一位
index = (index < this.addrBook.contacts.length) ? index : index - 1; index = (index < this.addrBook.contacts.length) ? index : index - 1;
// 如果contract被删除完,则设置me为选中态 // 如果contract被删除完,则设置me为选中态
this.selectedPerson = (index >= 0) ? this.addrBook.contacts[index] : this.addrBook.me; this.selectedPerson = (index >= 0) ? this.addrBook.contacts[index] : this.addrBook.me;
}) })
} }
} }
} }
} }
} }
@Component @Component
struct AddressBookView { struct AddressBookView {
@ObjectLink me: Person; @ObjectLink me: Person;
@ObjectLink contacts: ObservedArray<Person>; @ObjectLink contacts: ObservedArray<Person>;
@State selectedPerson: Person = undefined; @State selectedPerson: Person = new Person("", "", 0, "", []);
aboutToAppear() { aboutToAppear() {
this.selectedPerson = this.me; this.selectedPerson = this.me;
} }
build() { build() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) {
Text("Me:") Text("Me:")
PersonView({ person: this.me, phones: this.me.phones, selectedPerson: this.$selectedPerson }) PersonView({ person: this.me, phones: this.me.phones, selectedPerson: this.$selectedPerson })
Divider().height(8) Divider().height(8)
ForEach(this.contacts, ForEach(this.contacts, (contact: Person) => {
contact => { PersonView({ person: contact, phones: contact.phones as ObservedArray<string>, selectedPerson: this.$selectedPerson })
PersonView({ person: contact, phones: contact.phones, selectedPerson: this.$selectedPerson }) },
}, (contact: Person) => contact.id_
contact => contact.id_
) )
Divider().height(8) Divider().height(8)
Text("Edit:") Text("Edit:")
PersonEditView({ PersonEditView({
selectedPerson: this.$selectedPerson, selectedPerson: this.$selectedPerson,
...@@ -1313,7 +1311,7 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1313,7 +1311,7 @@ export class ObservedArray<T> extends Array<T> {
.borderStyle(BorderStyle.Solid).borderWidth(5).borderColor(0xAFEEEE).borderRadius(5) .borderStyle(BorderStyle.Solid).borderWidth(5).borderColor(0xAFEEEE).borderRadius(5)
} }
} }
@Entry @Entry
@Component @Component
struct PageEntry { struct PageEntry {
...@@ -1324,7 +1322,7 @@ export class ObservedArray<T> extends Array<T> { ...@@ -1324,7 +1322,7 @@ export class ObservedArray<T> extends Array<T> {
new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]), new Person("Sam", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]), new Person("Vivi", "Itamerenkatu 9", 180, "Helsinki", ["18*********", "18*********"]),
]); ]);
build() { build() {
Column() { Column() {
AddressBookView({ me: this.addrBook.me, contacts: this.addrBook.contacts, selectedPerson: this.addrBook.me }) AddressBookView({ me: this.addrBook.me, contacts: this.addrBook.contacts, selectedPerson: this.addrBook.me })
......
...@@ -41,7 +41,7 @@ struct LinkChild { ...@@ -41,7 +41,7 @@ struct LinkChild {
@Component @Component
struct PropChild2 { struct PropChild2 {
@Prop testNum: ClassA; @Prop testNum: ClassA = new ClassA(0);
build() { build() {
Text(`PropChild2 testNum ${this.testNum.c}`) Text(`PropChild2 testNum ${this.testNum.c}`)
...@@ -53,7 +53,7 @@ struct PropChild2 { ...@@ -53,7 +53,7 @@ struct PropChild2 {
@Component @Component
struct PropChild3 { struct PropChild3 {
@Prop testNum: ClassA; @Prop testNum: ClassA = new ClassA(0);
build() { build() {
Text(`PropChild3 testNum ${this.testNum.c}`) Text(`PropChild3 testNum ${this.testNum.c}`)
...@@ -460,10 +460,10 @@ struct ParentComp { ...@@ -460,10 +460,10 @@ struct ParentComp {
CounterComp({ value: this.counter[2] }) CounterComp({ value: this.counter[2] })
Divider().height(5) Divider().height(5)
ForEach(this.counter, ForEach(this.counter,
item => { (item: ParentCounter) => {
CounterComp({ value: item }) CounterComp({ value: item })
}, },
item => item.id.toString() (item: ParentCounter) => item.id.toString()
) )
Divider().height(5) Divider().height(5)
// 第一个点击事件 // 第一个点击事件
...@@ -576,10 +576,10 @@ struct ParentComp { ...@@ -576,10 +576,10 @@ struct ParentComp {
CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter }) CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter })
Divider().height(5) Divider().height(5)
ForEach(this.counter, ForEach(this.counter,
item => { (item: ParentCounter) => {
CounterComp({ value: item, subValue: item.subCounter }) CounterComp({ value: item, subValue: item.subCounter })
}, },
item => item.id.toString() (item: ParentCounter) => item.id.toString()
) )
Divider().height(5) Divider().height(5)
Text('Parent: reset entire counter') Text('Parent: reset entire counter')
...@@ -673,10 +673,10 @@ struct ParentComp { ...@@ -673,10 +673,10 @@ struct ParentComp {
CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter }) CounterComp({ value: this.counter[2], subValue: this.counter[2].subCounter })
Divider().height(5) Divider().height(5)
ForEach(this.counter, ForEach(this.counter,
item => { (item: ParentCounter) => {
CounterComp({ value: item, subValue: item.subCounter }) CounterComp({ value: item, subValue: item.subCounter })
}, },
item => item.id.toString() (item: ParentCounter) => item.id.toString()
) )
Divider().height(5) Divider().height(5)
Text('Parent: reset entire counter') Text('Parent: reset entire counter')
...@@ -754,6 +754,37 @@ struct CounterComp { ...@@ -754,6 +754,37 @@ struct CounterComp {
```ts ```ts
let nextId = 1;
@Observed
class SubCounter {
counter: number;
constructor(c: number) {
this.counter = c;
}
}
@Observed
class ParentCounter {
id: number;
counter: number;
subCounter: SubCounter;
incrCounter() {
this.counter++;
}
incrSubCounter(c: number) {
this.subCounter.counter += c;
}
setSubCounter(c: number): void {
this.subCounter.counter = c;
}
constructor(c: number) {
this.id = nextId++;
this.counter = c;
this.subCounter = new SubCounter(c);
}
}
@Component @Component
struct SubCounterComp { struct SubCounterComp {
@ObjectLink subValue: SubCounter; @ObjectLink subValue: SubCounter;
...@@ -767,7 +798,7 @@ struct SubCounterComp { ...@@ -767,7 +798,7 @@ struct SubCounterComp {
} }
@Component @Component
struct CounterComp { struct CounterComp {
@Prop value: ParentCounter; @ObjectLink value: ParentCounter;
build() { build() {
Column({ space: 10 }) { Column({ space: 10 }) {
Text(`this.value.incrCounter(): this.value.counter: ${this.value.counter}`) Text(`this.value.incrCounter(): this.value.counter: ${this.value.counter}`)
...@@ -798,10 +829,10 @@ struct ParentComp { ...@@ -798,10 +829,10 @@ struct ParentComp {
CounterComp({ value: this.counter[2] }) CounterComp({ value: this.counter[2] })
Divider().height(5) Divider().height(5)
ForEach(this.counter, ForEach(this.counter,
item => { (item: ParentCounter) => {
CounterComp({ value: item }) CounterComp({ value: item })
}, },
item => item.id.toString() (item: ParentCounter) => item.id.toString()
) )
Divider().height(5) Divider().height(5)
Text('Parent: reset entire counter') Text('Parent: reset entire counter')
...@@ -949,15 +980,18 @@ struct CompA { ...@@ -949,15 +980,18 @@ struct CompA {
realState1: Array<number> = [4, 1, 3, 2]; // 未使用状态变量装饰器 realState1: Array<number> = [4, 1, 3, 2]; // 未使用状态变量装饰器
realState2: Color = Color.Yellow; realState2: Color = Color.Yellow;
updateUI(param: any): any { updateUI1(param: Array<number>): Array<number> {
const triggerAGet = this.needsUpdate;
return param;
}
updateUI2(param: Color): Color {
const triggerAGet = this.needsUpdate; const triggerAGet = this.needsUpdate;
return param; return param;
} }
build() { build() {
Column({ space: 20 }) { Column({ space: 20 }) {
ForEach(this.updateUI(this.realState1), ForEach(this.updateUI1(this.realState1),
item => { (item: Array<number>) => {
Text(`${item}`) Text(`${item}`)
}) })
Text("add item") Text("add item")
...@@ -976,7 +1010,7 @@ struct CompA { ...@@ -976,7 +1010,7 @@ struct CompA {
// 触发UI视图更新 // 触发UI视图更新
this.needsUpdate = !this.needsUpdate; this.needsUpdate = !this.needsUpdate;
}) })
}.backgroundColor(this.updateUI(this.realState2)) }.backgroundColor(this.updateUI2(this.realState2))
.width(200).height(500) .width(200).height(500)
} }
} }
...@@ -1005,7 +1039,7 @@ struct CompA { ...@@ -1005,7 +1039,7 @@ struct CompA {
build() { build() {
Column({ space: 20 }) { Column({ space: 20 }) {
ForEach(this.realState1, ForEach(this.realState1,
item => { (item: Array<number>) => {
Text(`${item}`) Text(`${item}`)
}) })
Text("add item") Text("add item")
...@@ -1108,7 +1142,7 @@ struct Parent { ...@@ -1108,7 +1142,7 @@ struct Parent {
@Component @Component
struct Child { struct Child {
@Prop voteOne: ClassE @ObjectLink voteOne: ClassE
build() { build() {
Column() { Column() {
Text(this.voteOne.name).fontSize(24).fontColor(Color.Red).margin(50) Text(this.voteOne.name).fontSize(24).fontColor(Color.Red).margin(50)
...@@ -1123,7 +1157,7 @@ struct Child { ...@@ -1123,7 +1157,7 @@ struct Child {
@Component @Component
struct ChildOne { struct ChildOne {
@Prop voteTwo: ClassD @ObjectLink voteTwo: ClassD
build() { build() {
Column() { Column() {
Text(this.voteTwo.name).fontSize(24).fontColor(Color.Red).margin(50) Text(this.voteTwo.name).fontSize(24).fontColor(Color.Red).margin(50)
...@@ -1138,7 +1172,7 @@ struct ChildOne { ...@@ -1138,7 +1172,7 @@ struct ChildOne {
@Component @Component
struct ChildTwo { struct ChildTwo {
@Prop voteThree: ClassC @ObjectLink voteThree: ClassC
build() { build() {
Column() { Column() {
Text(this.voteThree.name).fontSize(24).fontColor(Color.Red).margin(50) Text(this.voteThree.name).fontSize(24).fontColor(Color.Red).margin(50)
...@@ -1153,7 +1187,7 @@ struct ChildTwo { ...@@ -1153,7 +1187,7 @@ struct ChildTwo {
@Component @Component
struct ChildThree { struct ChildThree {
@Prop voteFour: ClassB @ObjectLink voteFour: ClassB
build() { build() {
Column() { Column() {
Text(this.voteFour.name).fontSize(24).fontColor(Color.Red).margin(50) Text(this.voteFour.name).fontSize(24).fontColor(Color.Red).margin(50)
...@@ -1168,7 +1202,7 @@ struct ChildThree { ...@@ -1168,7 +1202,7 @@ struct ChildThree {
@Component @Component
struct ChildFour { struct ChildFour {
@Prop voteFive: ClassA @ObjectLink voteFive: ClassA
build() { build() {
Column() { Column() {
Text(this.voteFive.title).fontSize(24).fontColor(Color.Red).margin(50) Text(this.voteFive.title).fontSize(24).fontColor(Color.Red).margin(50)
...@@ -1245,6 +1279,59 @@ class ClassE { ...@@ -1245,6 +1279,59 @@ class ClassE {
以下组件层次结构呈现的是@Reusable组件复用场景的数据结构。 以下组件层次结构呈现的是@Reusable组件复用场景的数据结构。
```ts ```ts
// 以下是嵌套类对象的数据结构。
@Observed
class ClassA {
public title: string;
constructor(title: string) {
this.title = title;
}
}
@Observed
class ClassB {
public name: string;
public a: ClassA;
constructor(name: string, a: ClassA) {
this.name = name;
this.a = a;
}
}
@Observed
class ClassC {
public name: string;
public b: ClassB;
constructor(name: string, b: ClassB) {
this.name = name;
this.b = b;
}
}
@Observed
class ClassD {
public name: string;
public c: ClassC;
constructor(name: string, c: ClassC) {
this.name = name;
this.c = c;
}
}
@Observed
class ClassE {
public name: string;
public d: ClassD;
constructor(name: string, d: ClassD) {
this.name = name;
this.d = d;
}
}
@Entry @Entry
@Component @Component
struct Parent { struct Parent {
...@@ -1266,9 +1353,9 @@ struct Parent { ...@@ -1266,9 +1353,9 @@ struct Parent {
@Component @Component
struct Child { struct Child {
@State voteOne: ClassE = new ClassE('voteOne', new ClassD('OpenHarmony', new ClassC('Hello', new ClassB('World', new ClassA('Peace'))))) @State voteOne: ClassE = new ClassE('voteOne', new ClassD('OpenHarmony', new ClassC('Hello', new ClassB('World', new ClassA('Peace')))))
aboutToReuse(params){
this.voteOne = params
aboutToReuse(params: ClassE) {
this.voteOne = params
} }
build() { build() {
Column() { Column() {
...@@ -1287,7 +1374,7 @@ struct Child { ...@@ -1287,7 +1374,7 @@ struct Child {
@Component @Component
struct ChildOne { struct ChildOne {
@State voteTwo: ClassD = new ClassD('voteTwo', new ClassC('Hello', new ClassB('World', new ClassA('Peace')))) @State voteTwo: ClassD = new ClassD('voteTwo', new ClassC('Hello', new ClassB('World', new ClassA('Peace'))))
aboutToReuse(params){ aboutToReuse(params: ClassD){
this.voteTwo = params this.voteTwo = params
} }
build() { build() {
...@@ -1307,7 +1394,7 @@ struct ChildOne { ...@@ -1307,7 +1394,7 @@ struct ChildOne {
@Component @Component
struct ChildTwo { struct ChildTwo {
@State voteThree: ClassC = new ClassC('voteThree', new ClassB('World', new ClassA('Peace'))) @State voteThree: ClassC = new ClassC('voteThree', new ClassB('World', new ClassA('Peace')))
aboutToReuse(params){ aboutToReuse(params: ClassC){
this.voteThree = params this.voteThree = params
} }
...@@ -1328,7 +1415,7 @@ struct ChildTwo { ...@@ -1328,7 +1415,7 @@ struct ChildTwo {
@Component @Component
struct ChildThree { struct ChildThree {
@State voteFour: ClassB = new ClassB('voteFour', new ClassA('Peace')) @State voteFour: ClassB = new ClassB('voteFour', new ClassA('Peace'))
aboutToReuse(params){ aboutToReuse(params: ClassB){
this.voteFour = params this.voteFour = params
} }
...@@ -1349,7 +1436,7 @@ struct ChildThree { ...@@ -1349,7 +1436,7 @@ struct ChildThree {
@Component @Component
struct ChildFour { struct ChildFour {
@State voteFive: ClassA = new ClassA('voteFive') @State voteFive: ClassA = new ClassA('voteFive')
aboutToReuse(params){ aboutToReuse(params: ClassA){
this.voteFive = params this.voteFive = params
} }
......
...@@ -75,7 +75,7 @@ index.ets文件是HAR导出声明文件的入口,HAR需要导出的接口, ...@@ -75,7 +75,7 @@ index.ets文件是HAR导出声明文件的入口,HAR需要导出的接口,
``` ```
### 导出ArkUI组件 ### 导出ArkUI组件
ArkUI组件的导出方式与ts的导出方式一致,通过`export`导出ArkUI组件,示例如下: ArkUI组件的导出方式与ts的导出方式一致,通过`export`导出ArkUI组件,示例如下:
```js ```ts
// library/src/main/ets/components/MainPage/MainPage.ets // library/src/main/ets/components/MainPage/MainPage.ets
@Component @Component
export struct MainPage { export struct MainPage {
...@@ -94,13 +94,13 @@ export struct MainPage { ...@@ -94,13 +94,13 @@ export struct MainPage {
} }
``` ```
HAR对外暴露的接口,在index.ets导出文件中声明如下所示: HAR对外暴露的接口,在index.ets导出文件中声明如下所示:
```js ```ts
// library/index.ets // library/index.ets
export { MainPage } from './src/main/ets/components/MainPage/MainPage' export { MainPage } from './src/main/ets/components/MainPage/MainPage'
``` ```
### 导出ts类和方法 ### 导出ts类和方法
通过`export`导出ts类和方法,支持导出多个ts类和方法,示例如下所示: 通过`export`导出ts类和方法,支持导出多个ts类和方法,示例如下所示:
```js ```ts
// library/src/main/ts/test.ets // library/src/main/ts/test.ets
export class Log { export class Log {
static info(msg: string) { static info(msg: string) {
...@@ -117,7 +117,7 @@ export function func2() { ...@@ -117,7 +117,7 @@ export function func2() {
} }
``` ```
HAR对外暴露的接口,在index.ets导出文件中声明如下所示: HAR对外暴露的接口,在index.ets导出文件中声明如下所示:
```js ```ts
// library/index.ets // library/index.ets
export { Log } from './src/main/ts/test' export { Log } from './src/main/ts/test'
export { func } from './src/main/ts/test' export { func } from './src/main/ts/test'
...@@ -135,7 +135,7 @@ HAR模块编译打包时会把资源打包到HAR中。在编译构建HAP时,De ...@@ -135,7 +135,7 @@ HAR模块编译打包时会把资源打包到HAR中。在编译构建HAP时,De
### 引用HAR的ArkUI组件 ### 引用HAR的ArkUI组件
HAR的依赖配置成功后,可以引用HAR的ArkUI组件。ArkUI组件的导入方式与ts的导入方式一致,通过`import`引入HAR导出的ArkUI组件,示例如下所示: HAR的依赖配置成功后,可以引用HAR的ArkUI组件。ArkUI组件的导入方式与ts的导入方式一致,通过`import`引入HAR导出的ArkUI组件,示例如下所示:
```js ```ts
// entry/src/main/ets/pages/index.ets // entry/src/main/ets/pages/index.ets
import { MainPage } from "library" import { MainPage } from "library"
...@@ -160,7 +160,7 @@ struct Index { ...@@ -160,7 +160,7 @@ struct Index {
``` ```
### 引用HAR的类和方法 ### 引用HAR的类和方法
通过`import`引用HAR导出的ts类和方法,示例如下所示: 通过`import`引用HAR导出的ts类和方法,示例如下所示:
```js ```ts
// entry/src/main/ets/pages/index.ets // entry/src/main/ets/pages/index.ets
import { Log } from "library" import { Log } from "library"
import { func } from "library" import { func } from "library"
...@@ -186,7 +186,7 @@ struct Index { ...@@ -186,7 +186,7 @@ struct Index {
``` ```
### 引用HAR的资源 ### 引用HAR的资源
通过`$r`引用HAR中的资源,例如在HAR模块的`src/main/resources`里添加字符串资源(在string.json中定义,name:hello_har)和图片资源(icon_har.png),然后在Entry模块中引用该字符串和图片资源的示例如下所示: 通过`$r`引用HAR中的资源,例如在HAR模块的`src/main/resources`里添加字符串资源(在string.json中定义,name:hello_har)和图片资源(icon_har.png),然后在Entry模块中引用该字符串和图片资源的示例如下所示:
```js ```ts
// entry/src/main/ets/pages/index.ets // entry/src/main/ets/pages/index.ets
@Entry @Entry
@Component @Component
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册