Two tips in arkui framework

app.ets Define global objects in , Among others eTS How to obtain files

I believe everyone has such a question , How to be in app.ets Define global objects in ( Global variables 、 Method ), How else ets File and apply it ？

stay js Mode in app.js Objects are defined in , You can customize js Through the file getApp() obtain app.js The objects exposed in the game .

So here's the problem ： stay app.ets Next , How to achieve it ？

in addition , When app.ets When the value of the global variable in changes , Will other referenced interfaces refresh automatically ？ How to do ？

Actually FA Model USES globalThis It can realize global variable sharing .

Let's see the effect first ：

Now let's take a look at , How did we achieve .

app.ets in ：

export default {  onCreate() {    console.info('Application onCreate')    globalThis.title = 'OpenHarmony'  },​  onDestroy() {    console.info('Application onDestroy')  },}

index.ets

​@[email protected] Global {  @State title: string = ''  aboutToAppear(){    this.title = globalThis.title  }​  build() {    Row() {      Column() {        Text(this.title)          .fontSize(50)          .fontWeight(FontWeight.Bold)      }      .width('100%')    }    .height('100%')  }}

It should be noted that globalThis Must be consistent , Otherwise, you won't get value .

This also gives us some enlightenment , We can use it to deal with the overall situation , Some common things can be encapsulated here , Global use

ets How to encapsulate code

stay Flutter Such problems are often encountered in . If you don't package some common components , Then your code will be very verbose , And it's not easy to read , At this time, we need to extract

that , How to extract ？

​@[email protected] Global {  @State title: string = ''​  aboutToAppear(){    this.title = globalThis.title  }  @Builder CustomTitle(text:string) {    Text(text)      .fontSize(16)      .fontWeight(FontWeight.Bold)      .margin({ top: 10, bottom: 10 })  }​  build() {    Row() {      Column() {        this.CustomTitle('1、 come on. ：')        this.CustomTitle('2、 Strive ：')        Text(this.title)          .fontSize(50)          .fontWeight(FontWeight.Bold)      }      .width('100%')    }    .height('100%')  }}

adopt @Builder CustomTitle To encapsulate .

that , How to extract the same method ？

First define

// Text Public style @Extend(Text) function commonStyle () {  .width('100%')  .fontSize(14)} Column() {            Text('abc,').commonStyle().textCase(TextCase.LowerCase)            Text('abc').commonStyle().textCase(TextCase.UpperCase)          }

Reuse .

well , today My article is written here .