HarmonyOS 应用开发之自定义组件冻结功能，HarmonyOS鸿蒙程序员最新职业规划

最新推荐文章于 2024-08-22 07:31:04 发布

2301_77116622

最新推荐文章于 2024-08-22 07:31:04 发布

阅读量1k

点赞数 23

分类专栏： 2024年程序员学习文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/2301_77116622/article/details/137567862

版权

2024年程序员学习专栏收录该内容

266 篇文章 0 订阅

订阅专栏

Button(‘change message’).onClick(() => {
this.message++
})
List({ space: 3 }) {
LazyForEach(this.data, (item: string) => {
ListItem() {
FreezeChild({ message: this.message, index: item })
}
}, (item: string) => item)
}.cachedCount(5).height(500)
}

}
}

@Component({ freezeWhenInactive: true })
struct FreezeChild {
@Link @Watch(“onMessageUpdated”) message: number;
private index: string = “”;

aboutToAppear() {
console.info(FreezeChild aboutToAppear index: ${this.index})
}

onMessageUpdated() {
console.info(FreezeChild message callback func ${this.message}, index: ${this.index})
}

build() {
Text(“message” + ${this.message}, index: ${this.index})
.width(‘90%’)
.height(160)
.backgroundColor(0xAFEEEE)
.textAlign(TextAlign.Center)
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
}

在上面的示例中：

1.点击“change message”更改message的值，当前正在显示的ListItem中的子组件@Watch中注册的方法onMessageUpdated被触发。缓存节点@Watch中注册的方法不会被触发。（如果不加组件冻结，当前正在显示的ListItem和cachcount缓存节点@Watch中注册的方法onMessageUpdated都会触发watch回调。）

2.List区域外的ListItem滑动到List区域内，状态由inactive变为active，对应的@Watch中注册的方法onMessageUpdated被触发。

3.再次点击“change message”更改message的值，仅有当前显示的ListItem中的子组件@Watch中注册的方法onMessageUpdated被触发。

Navigation

对当前不可见的页面进行冻结，不会触发组件的更新，当返回该页面时，触发@Watch回调进行刷新。

@Entry
@Component
struct MyNavigationTestStack {
@Provide(‘pageInfo’) pageInfo: NavPathStack = new NavPathStack();
@State @Watch(“info”) message: number = 0;
@State logNumber: number = 0;

info() {
console.info(freeze-test MyNavigation message callback ${this.message});
}

@Builder
PageMap(name: string) {
if (name === ‘pageOne’) {
pageOneStack({ message: this.message, logNumber: this.logNumber })
} else if (name === ‘pageTwo’) {
pageTwoStack({ message: this.message, logNumber: this.logNumber })
} else if (name === ‘pageThree’) {
pageThreeStack({ message: this.message, logNumber: this.logNumber })
}
}

build() {
Column() {
Button(‘change message’)
.onClick(() => {
this.message++;
})
Navigation(this.pageInfo) {
Column() {
Button(‘Next Page’, { stateEffect: true, type: ButtonType.Capsule })
.width(‘80%’)
.height(40)
.margin(20)
.onClick(() => {
this.pageInfo.pushPath({ name: ‘pageOne’ }); //将name指定的NavDestination页面信息入栈
})
}
}.title(‘NavIndex’)
.navDestination(this.PageMap)
.mode(NavigationMode.Stack)
}
}
}

@Component
struct pageOneStack {
@Consume(‘pageInfo’) pageInfo: NavPathStack;
@State index: number = 1;
@Link message: number;
@Link logNumber: number;

build() {
NavDestination() {
Column() {
NavigationContentMsgStack({ message: this.message, index: this.index, logNumber: this.logNumber })
Text(“cur stack size:” + ${this.pageInfo.size()})
.fontSize(30)
.fontWeight(FontWeight.Bold)
Button(‘Next Page’, { stateEffect: true, type: ButtonType.Capsule })
.width(‘80%’)
.height(40)
.margin(20)
.onClick(() => {
this.pageInfo.pushPathByName(‘pageTwo’, null);
})
Button(‘Back Page’, { stateEffect: true, type: ButtonType.Capsule })
.width(‘80%’)
.height(40)
.margin(20)
.onClick(() => {
this.pageInfo.pop();
})
}.width(‘100%’).height(‘100%’)
}.title(‘pageOne’)
.onBackPressed(() => {
this.pageInfo.pop();
return true;
})
}
}

@Component
struct pageTwoStack {
@Consume(‘pageInfo’) pageInfo: NavPathStack;
@State index: number = 2;
@Link message: number;
@Link logNumber: number;

build() {
NavDestination() {
Column() {
NavigationContentMsgStack({ message: this.message, index: this.index, logNumber: this.logNumber })
Text(“cur stack size:” + ${this.pageInfo.size()})
.fontSize(30)
.fontWeight(FontWeight.Bold)
Button(‘Next Page’, { stateEffect: true, type: ButtonType.Capsule })
.width(‘80%’)
.height(40)
.margin(20)
.onClick(() => {
this.pageInfo.pushPathByName(‘pageThree’, null);
})
Button(‘Back Page’, { stateEffect: true, type: ButtonType.Capsule })
.width(‘80%’)
.height(40)
.margin(20)
.onClick(() => {
this.pageInfo.pop();
})
}.width(‘100%’).height(‘100%’)
}.title(‘pageTwo’)
.onBackPressed(() => {
this.pageInfo.pop();
return true;
})
}
}

@Component
struct pageThreeStack {
@Consume(‘pageInfo’) pageInfo: NavPathStack;
@State index: number = 3;
@Link message: number;
@Link logNumber: number;

build() {
NavDestination() {
Column() {
NavigationContentMsgStack({ message: this.message, index: this.index, logNumber: this.logNumber })
Text(“cur stack size:” + ${this.pageInfo.size()})
.fontSize(30)
.fontWeight(FontWeight.Bold)
Button(‘Next Page’, { stateEffect: true, type: ButtonType.Capsule })
.width(‘80%’)
.height(40)
.margin(20)
.onClick(() => {
this.pageInfo.pushPathByName(‘pageOne’, null);
})
Button(‘Back Page’, { stateEffect: true, type: ButtonType.Capsule })
.width(‘80%’)
.height(40)
.margin(20)
.onClick(() => {
this.pageInfo.pop();
})
}.width(‘100%’).height(‘100%’)
}.title(‘pageThree’)
.onBackPressed(() => {
this.pageInfo.pop();
return true;
})
}
}

@Component({ freezeWhenInactive: true })
struct NavigationContentMsgStack {
@Link @Watch(“info”) message: number;
@Link index: number;
@Link logNumber: number;

info() {
console.info(freeze-test NavigationContent message callback ${this.message});
console.info(freeze-test ---- called by content ${this.index});
this.logNumber++;
}

build() {
Column() {
Text(“msg:” + ${this.message})
.fontSize(30)
.fontWeight(FontWeight.Bold)
Text(“log number:” + ${this.logNumber})
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
}
}

在上面的示例中：

1.点击“change message”更改message的值，当前正在显示的MyNavigationTestStack组件中的@Watch中注册的方法info被触发。

2.点击“Next Page”切换到PageOne，创建pageOneStack节点。

3.再次点击“change message”更改message的值，仅pageOneStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

4.再次点击“Next Page”切换到PageTwo，创建pageTwoStack节点。

5.再次点击“change message”更改message的值，仅pageTwoStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

6.再次点击“Next Page”切换到PageThree，创建pageThreeStack节点。

7.再次点击“change message”更改message的值，仅pageThreeStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

8.点击“Back Page”回到PageTwo，此时，仅pageTwoStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

9.再次点击“Back Page”回到PageOne，此时，仅pageOneStack中的NavigationContentMsgStack子组件中的@Watch中注册的方法info被触发。

10.再次点击“Back Page”回到初始页，此时，无任何触发。