ArkUI框架中的两个小技巧

举报
坚果的博客 发表于 2022/07/27 08:27:48 2022/07/27
【摘要】 app.ets中定义全局对象,在其他eTS文件如何获取相信大家都有这样一个疑问,如何在app.ets中定义全局对象(全局变量、方法),又如何在其它ets文件中获取并应用它?在js方式中在app.js中定义了对象,可以在自定义js文件中通过getApp()获取app.js中暴露的对象。那么问题就来了:在app.ets下,如何实现呢?另外,当app.ets中全局变量的值改变时,其它引用的界面会自...



app.ets中定义全局对象,在其他eTS文件如何获取

相信大家都有这样一个疑问,如何在app.ets中定义全局对象(全局变量、方法),又如何在其它ets文件中获取并应用它?

在js方式中在app.js中定义了对象,可以在自定义js文件中通过getApp()获取app.js中暴露的对象。

那么问题就来了:在app.ets下,如何实现呢?

另外,当app.ets中全局变量的值改变时,其它引用的界面会自动刷新吗?如何做到?

其实FA模型使用globalThis能够实现全局变量共享。

先来看一下效果:image-20220721133122701

现在来看一下,我们是如何实现的。

app.ets中:

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

index.ets

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


需要注意的是globalThis必须要保持一致,不然是得不到值的。

这个也是给我们一些启示,我们可以用来做一下全局的处理,将一些常用的东西可以封装在此,全局使用


ets如何封装代码


在Flutter中也是经常遇到这样的问题。如果不把一些常用的组件封装,那么你的代码将会显得十分啰嗦,而且不易阅读,那么这个时候我们就需要来抽取一下


那么,如何抽取呢?


​
@Entry
@Component
struct 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、加油:')
        this.CustomTitle('2、努力:')
        Text(this.title)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

通过@Builder CustomTitle来进行封装。

那么,对于相同方法如何抽取呢?

先定义

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

再使用。




好的,今天 的文章就写到这。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。