【每日学点HarmonyOS Next知识】 状态变量、公共Page、可见区域变化回调、接收参数、拖拽排序控件

1、HarmonyOS 在定时器里面改变@state修饰的变量，无法更新UI吗？

将函数function写成了封装函数的形式就可以了

@Entry
@Component
struct Index {@State acSetValve: number = 0;aboutToAppear(): void {setInterval(() => {this.acSetValve += 200;console.log('hahhah' + this.acSetValve)} ,100)}build() {Row() {Column() {Text(this.acSetValve.toString()).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

2、HarmonyOS 写一个公共的page，然后其他具体的page继承它，在公共page的做一些处理？

demo参考：

//主页面  FirstTest.ets
import { FirstTest2 } from "./FirstTest2"@Entry
@Component
struct FirstTest {@State message1: string = 'Hello World';// 显隐控制设置为不占用build() {Column() {Text("FirstTest：" + this.message1).fontSize(25).fontWeight(FontWeight.Bold)//FirstTest2页面数据传递参考API：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ArkTS-link-0000001820999565#ZH-CN_TOPIC_0000001857916041__%E6%A6%82%E8%BF%B0//FirstTest2为Component修饰的组件，并且进行export，然后在FirstTest进行导入直接使用即可，可以多个页面复用FirstTest2({message2:this.message1});}}
}//复用组件  FirstTest2.ets
@Component
export struct FirstTest2 {@State test:string = "FirstTest2"@Link message2: string ;build() {Row() {Column() {Text("FirstTest2:" + this.test).fontSize(25).fontWeight(FontWeight.Bold)Text("FirstTest2:" + this.message2).fontSize(25).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

3、HarmonyOS onVisibleAreaChange事件没有触发？

添加onVisibleAreaChange事件监听，只有第一屏可以触发，切到第二屏没有触发。影响埋点上报

onVisibleAreaChange规格上不支持监控由改变offset引起的组件区域变化。若要实现切屏监控，请使用swiper组件。

文档参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5

4、HarmonyOS router.pushNamedRoute参数传递 在接收页面怎么接收？

可以通过router.getParams();接收参数，API链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5#ZH-CN_TOPIC_0000001884917590__routergetparams

参考demo如下:

import router from '@ohos.router';
class innerParams {array:number[]constructor(tuple:number[]) {this.array = tuple}
}class routerParams {text:stringdata:innerParamsconstructor(str:string, tuple:number[]) {this.text = strthis.data = new innerParams(tuple)}
}@Entry
@Component
struct Router1 {build() {Column(){Column(){Text("我是页面1").fontSize(50)}Column(){Button("跳转").onClick(()=>{router.pushUrl({url: 'pages/Router11',params: new routerParams('message' ,[123,456,789])})})}}.width('100%').height('100%')}
}
import router from '@ohos.router';class innerParams {array:number[]constructor(tuple:number[]) {this.array = tuple}
}class routerParams {text:stringdata:innerParamsconstructor(str:string, tuple:number[]) {this.text = strthis.data = new innerParams(tuple)}
}@Entry
@Component
struct Router11 {aboutToAppear(): void {let s:number[]=((router.getParams() as routerParams).data as innerParams).arrayconsole.log("*********:"+s);}build() {Column(){Text("123").fontSize(50)Row(){Text("33333").fontSize(50)}}.width('100%').height('100%').opacity(0.5).backgroundColor(Color.Pink)}
}

5、HarmonyOS 拖拽排序以及控件平移效果是否有工具类可以用，当前控件数据数量上限无法满足？

拖拽排序以及控件平移效果是否有工具类可以用，当前控件数据数量上限无法满足

动画效果可以参考以下demo：

@Entry
@Component
struct AnimationPage {@Provide desX: number = 0;@Provide desY: number = 0;@BuilderTabBar(index: number) {Column() {Image($r("app.media.icon")).width(38).height(38)Text(index == 1 ? "分类" : index.toString())}.onAreaChange((oldValue: Area, newValue: Area) => {if (index == 1) {console.log("onAreaChange========= newValue:" + JSON.stringify(newValue))this.desX = newValue.globalPosition.x as numberthis.desY = newValue.globalPosition.y as number}})}build() {Column() {Category()Column() {Image($r("app.media.icon")).width(38).height(38)}.onAreaChange((oldValue: Area, newValue: Area) => {console.log("onAreaChange========= newValue:" + JSON.stringify(newValue))this.desX = newValue.globalPosition.x as numberthis.desY = newValue.globalPosition.y as number})}.width("100%").height("100%")}
}@Component
struct Category {@State dataList:number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]build() {Column() {Flex({direction:FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap}) {ForEach(this.dataList, (item:number) => {ListItemComponent()})}.width('100%').height('80%').backgroundColor(Color.White)}}
}@Observed
class AnimationBean {animationAppear: Boolean = false;id:number = -1;
}@Component
struct ListItemComponent {@State animationList: AnimationBean[] = []static index: number = 0;@Consume desX: number;@Consume desY: number;@Provide orgX: number = 0;@Provide orgY: number = 0;@BuilderBuildAnimationItem() {Image($r("app.media.app_icon")).width(41).height(41).id("test").onClick(() => {this.startAnimation();}).onAreaChange((oldValue:Area, newValue:Area) => {this.orgX = newValue.globalPosition.x as numberthis.orgY = newValue.globalPosition.y as numberconsole.log("onAreaChage==========" + JSON.stringify(newValue))})}startAnimation() {const animation = new AnimationBean();animation.id = ListItemComponent.index++this.animationList.push(animation)animateTo({duration: 800,curve: Curve.FastOutLinearIn,onFinish: () => {animation.animationAppear = false;this.animationList = this.animationList.filter((item: AnimationBean) => {return item.animationAppear})}}, () => {animation.animationAppear = true;})}@BuilderBuildItem() {Row() {Stack() {this.BuildAnimationItem()ForEach(this.animationList, (item: AnimationBean) => {AnimationChild({ item: item , AnimationView:this.BuildAnimationItem})}, (item: AnimationBean, index: number) => {return item.id.toLocaleString()})}}.width("20%").height(60)}build() {this.BuildItem()}
}@Component
struct AnimationChild {@ObjectLink item: AnimationBean;@Consume desX: number;@Consume desY: number;@Consume orgX: number;@Consume orgY: number;@BuilderParamAnimationView:() => void;build() {Row() {this.AnimationView()}.zIndex(5).translate(this.item.animationAppear ? { x: (this.desX - this.orgX -20), y: (this.desY - this.orgY) } : { x: 0 })}
}