devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙HarmonyOS4.0 -（ArkTs）_鸿蒙 arktu实时刷新

作者：weixin_40725706 | 2024-03-29 20:10:42

赞

踩

鸿蒙 arktu实时刷新

基本语法

  • 装饰器：如下图@Entry、@Component、@State都是装饰器。
    • @Component表示自定义组件。
    • @Entry表示该自定义组件的入口组件。
    • @State表示组件中的状态变量，状态变量的变化会触发UI的刷新。
  • UI描述：以声明式的方式来描述UI的结构，如上图build()方法中的代码。
  • 自定义组件：可复用的UI组件，如上图被@Component装饰的struct App。
  • 属性方法：通过链式调用使用更多属性，如上图.width('100%').height('100%')等。
  • 事件方法：通过链式调用使用更多事件逻辑，如上图中的.onClick(()=>{ })等。

  1. @Entry
  2. @Component
  3. struct App {
  4.   @State myText: string = 'HarmonyOS4.0';
  5.  
  6.   build() {
  7.     Column() {
  8.       Text(`${this.myText}`).fontSize(32).fontWeight(800)
  9.       Button('点击').onClick(() => {
  10.         this.myText = '欢迎使用鸿蒙'
  11.       }).width(100).margin({top:20})
  12.     }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  13.  
  14.   }
  15. }

创建自定义组件

注意：@Entry装饰的组件，其build函数下的根结点必须为容器组件，并且forEach不能作为根节点。     

           @Component装饰的组件，其build函数下的根结点可以为非容器组件，并且forEach不能作为根节点。            

1、在入口组件内部使用自定义组建
  1. @Component
  2. struct ExanpleComponent {
  3.   @State textValue: string = '组件状态'
  4.  
  5.   build() {
  6.     Text(this.textValue)
  7.       .fontSize(32)
  8.       .fontWeight(600)
  9.       .fontColor('#e33')
  10.       .onClick(() => {
  11.         this.textValue = '组件状态变化'
  12.       })
  13.   }
  14. }
  15.  
  16. @Entry
  17. @Component
  18. struct App {
  19.   @State myText: string = 'HarmonyOS4.0';
  20.  
  21.   build() {
  22.     Column() {
  23.       ExanpleComponent()
  24.       Text(`${this.myText}`)
  25.         .fontSize(32)
  26.         .fontWeight(800)
  27.       Button('点击')
  28.         .width(100)
  29.         .margin({ top: 20 })
  30.         .onClick(() => {
  31.           this.myText = '欢迎使用鸿蒙'
  32.         })
  33.     }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  34.  
  35.   }
  36. }
2、从外部导入使用自定义组建

Index.ets @Entry入口文件

Example.ets @Component自定义组件文件

生命周期（页面和自定义组件）

1、页面生命周期，即被@Entry修饰的组件生命周期
  • onPageShow：页面每次显示时触发。
  • onPageHide：页面每次隐藏时触发。
  • onBackPress：当用户点击返回按钮时出发。
2、组件生命周期，即被@Component修饰的组件生命周期
  • aboutToAppear：组件刚出现的时候回调该接口，具体为在创建自定义组件实例后早build函数前。
  • aboutToDisappear：在自定义组件销毁时执行。

@Styles

注意：@Style不能有参数。

  1. // 定义全局@style样式
  2. @Styles function publicStyle() {
  3.   .width('100%')
  4.   .height('100%')
  5.   .backgroundColor('#3ce')
  6. }
  7.  
  8. @Entry
  9. @Component
  10. struct App {
  11.   @State myText: string = 'HarmonyOS4.0';
  12.   // 定义局部@style样式
  13.   @Styles internalStyle(){
  14.     .width(200)
  15.     .margin({ top: 20 })
  16.   }
  17.  
  18.   build() {
  19.     Column() {
  20.       Button(this.myText)
  21.         .internalStyle()
  22.         .fontSize(20)
  23.         .onClick(() => {
  24.           this.myText = '欢迎使用鸿蒙'
  25.         })
  26.     }.publicStyle().justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  27.  
  28.   }
  29. }

@Extend

概念

  • 和@Style不同，@Extend仅支持定义在全局，不支持在组件内部定义。
  • 和@Style不同，@Extend装饰的方法支持参数，可以在调用时传递参数
  1. // 定义全局@Extend样式
  2. @Extend(Column) function publicStyle(width:string,height:string) {
  3.   .width(width)
  4.   .height(height)
  5.   .backgroundColor('#3ae')
  6. }
  7.  
  8. @Entry
  9. @Component
  10. struct App {
  11.   @State myText: string = 'HarmonyOS4.0';
  12.  
  13.   build() {
  14.     Column() {
  15.       Button(this.myText)
  16.         .fontSize(20)
  17.         .onClick(() => {
  18.           this.myText = '欢迎使用鸿蒙'
  19.         })
  20.     }.publicStyle('100%','100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  21.   }
  22. }

stateStyles多态样式

概述

stateStyles是属性方法，类似于css伪类，ArkUI提供了以下四种状态：

  • focused：获焦状态
  • normal：正常状态
  • pressed：按压状态
  • disabled：不可用状态
  1. @Styles function focusedStyle() {
  2.   .backgroundColor('red')
  3. }
  4.  
  5. @Entry
  6. @Component
  7. struct App {
  8.   @State myText: string = 'HarmonyOS4.0';
  9.   @Styles  pressedStyle() {
  10.   .backgroundColor('green')
  11. }
  12.   build() {
  13.     Column() {
  14.       Button(this.myText)
  15.         .fontSize(20)
  16.         .stateStyles({
  17.           focused: focusedStyle,
  18.           pressed: this.pressedStyle,
  19.           normal: {
  20.             .backgroundColor('blue')
  21.           },
  22.         })
  23.         .onClick(() => {
  24.           this.myText = '欢迎使用鸿蒙'
  25.         })
  26.     }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  27.   }
  28. }

@State状态管理

概念

  • 状态变量：被@State装饰的变量，状态变量的状态值的改变会引起UI的渲染更新。
  • 常规变量：没有被@State装饰的变量，它的改变永远不会引起UI的渲染更新。
  1. @Component
  2. struct MyComponent {
  3.   @State count: number = 0;
  4.   private increaseBy: number = 1;
  5.  
  6.   build() {
  7.   }
  8. }
  9.  
  10. @Component
  11. struct Parent {
  12.   build() {
  13.     Column() {
  14.       // 从父组件初始化，覆盖本地定义的默认值
  15.       MyComponent({ count: 1, increaseBy: 2 })
  16.     }
  17.   }
  18. }

@Prop父子单项同步（父传子）

概述

  • 单项同步：对父组件的状态变量值的修改，将同步到子元素@Prop装饰的变量，子组件@Prop变量的修改不会同步到父组件的状态变量上。

注意：@props装饰器不能在@Entry装饰的自定义组件中使用。

  1. @Component
  2. struct Child {
  3.   @Prop count: number;
  4.  
  5.   build() {
  6.     Column() {
  7.       Text(`子组件： ${this.count} `)
  8.       // @Prop装饰的变量不会同步给父组件
  9.       Button(`子组件-1`).onClick(() => {
  10.         this.count -= 1;
  11.       }).margin({ top: 24 })
  12.     }
  13.   }
  14. }
  15.  
  16. @Entry
  17. @Component
  18. struct Parent {
  19.   @State num: number = 0;
  20.  
  21.   build() {
  22.     Column() {
  23.       Text(`父组件：${this.num}`)
  24.       // 父组件的修改会同步给子组件
  25.       Button(`父组件+1`).onClick(() => {
  26.         this.num += 1;
  27.       }).margin({ top: 24 })
  28.       // 子组件
  29.       Child({ count: this.num }).margin({ top: 24 })
  30.     }.width('100%').justifyContent(FlexAlign.Center).margin({ top: 24 })
  31.  
  32.   }
  33. }

@Link父子双向同步（父传子、子传父）

概述

  • 双向同步：对父组件的状态变量值的修改，将同步到子元素@Link装饰的变量，子组件@Link变量也将同步到父组件的状态变量上。

注意：@Link装饰器不能在@Entry装饰的自定义组件中使用。

  1. @Component
  2. struct Child {
  3.   @Link items: number[];
  4.  
  5.   build() {
  6.     Column() {
  7.       Button(`子元素修改数组`).onClick(() => {
  8.         this.items = [100, 200, 300];
  9.       })
  10.       ForEach(this.items, item => {
  11.         Text(`${item}`)
  12.       })
  13.     }
  14.   }
  15. }
  16.  
  17. @Entry
  18. @Component
  19. struct Parent {
  20.   @State arr: number[] = [1, 2, 3];
  21.  
  22.   build() {
  23.     Column() {
  24.       Button(`父元素修改数组`).onClick(() => {
  25.         this.arr = [5, 6, 7];
  26.       })
  27.       ForEach(this.arr,
  28.         item => {
  29.           Text(`${item}`)
  30.         }
  31.       )
  32.       Child({ items: $arr })
  33.  
  34.  
  35.     }
  36.   }
  37. }

@Provide和@Consume后代组件双向同步（跨组建传参）

概述

  • 双向同步：@Provide与@Consume，应用于后代组件的数据双向同步，应用于数据在多个层级之间传递，实现跨层级传递。
  • 介绍：@Provide装饰的变量是在祖先节点中，是变量的提供者，@Consume装饰的变量是在后代组件中，是变量的消费者。

注意：@Provide与@Consume装饰的变量必须通过相同的属性名进行同步数据。

  1. @Component
  2. struct CompD {
  3.   // @Consume装饰的变量通过相同的属性名绑定其祖先组件CompA内的@Provide装饰的变量
  4.   @Consume publicValue: number;
  5.   build() {
  6.     Column() {
  7.       Text(`D组件${this.publicValue}`)
  8.       Button(`D组件按钮-1`)
  9.         .onClick(() => this.publicValue -= 1)
  10.     }
  11.     .width('50%')
  12.   }
  13. }
  14.  
  15. @Component
  16. struct CompC {
  17.   build() {
  18.     CompD()
  19.   }
  20. }
  21.  
  22. @Component
  23. struct CompB {
  24.   build() {
  25.     CompC()
  26.   }
  27. }
  28.  
  29. @Entry
  30. @Component
  31. struct CompA {
  32.   // @Provide装饰的变量publicValue由入口组件CompA提供其后代组件
  33.   @Provide publicValue: number = 0;
  34.  
  35.   build() {
  36.     Column() {
  37.       Text(`A组件${this.publicValue}`)
  38.       Button(`A组件按钮+1`)
  39.         .onClick(() => this.publicValue += 1)
  40.       CompB()
  41.     }
  42.   }
  43. }

@Observed和@ObjectLink多层嵌套双向同步

概述

  • 上文所述的装饰器只能观察到一层的变化，对于多层嵌套的情况，比如二维数组、多维对象，它们其他层级的变化是无法被观察的，因此引出了@Observed和@ObjectLink装饰器。

注意：

  • @ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。
  • @ObjectLink装饰的变量不能被赋值。
// 开发进行中...

@Watch监听状态的变化

概述

  • LocalStorage是页面级的UI存储，通过@Entry装饰器接收的参数可以在页面内共享一个LocalStorage实例。
  1. @Entry
  2. @Component
  3. struct CompA {
  4.   @Watch('change') @State count: number = 1
  5.  
  6.   change() {
  7.     console.log(`状态变化${this.count}`)
  8.   }
  9.  
  10.   build() {
  11.     Column() {
  12.       Button(`点击状态变化${this.count}`)
  13.         .onClick(() => {
  14.           this.count++
  15.         })
  16.     }
  17.   }
  18. }

LocalStorage页面级UI状态存储

概述

  • LocalStorage是页面级的UI存储，通过@Entry装饰器接收的参数可以在页面内共享一个LocalStorage实例。
  • 被@Entry装饰的@Component，可以被分配一个LocalStorage实例，此组件的所有子组件都将获取对该LocalStorage实例的访问权限，一个LocalStorage实例在组建数上可以分配给多个组件。
  • 被@Component装饰的组件最多可访问一个LocalStorage实例和AppStorage。
  • LocalStorage根据与@Component装饰的组件的同步类型不同，提供了两个装饰器：
    •  @LocalStorageProp：@LocalStorageProp装饰的变量与LocalStorage中给予属性建立的是单向同步关系。
    •  @LocalStorageLink：@LocalStorageLink装饰的变量与LocalStorage中给予属性建立的是双向向同步关系。

注意：LocalStorage创建后，命名属性的类型不可更改

1、@LocalStorageProp —— 单项数据同步

  1. // import { Child } from '../components/Example'
  2.  
  3. let storage = new LocalStorage({ 'PropA': 47 });
  4.  
  5. @Component
  6. struct Child {
  7.   @LocalStorageProp('PropA') num2: number = 1;
  8.  
  9.   build() {
  10.     // 点击后，只改变当前组件显示的num2，不会同步到LocalStorage中
  11.     Button(`子组件${this.num2}`)
  12.       .onClick(() => {
  13.         this.num2 += 1;
  14.       })
  15.   }
  16. }
  17.  
  18. @Entry(storage)
  19. @Component
  20. struct CompA {
  21.   @LocalStorageProp('PropA') num1: number = 1;
  22.  
  23.   build() {
  24.     Column({ space: 15 }) {
  25.       Child()
  26.       // 点击后，只改变当前组件显示的num1，不会同步到LocalStorage中
  27.       Button(`父组件 ${this.num1}`)
  28.         .onClick(() => this.num1 += 1)
  29.     }
  30.   }
  31. }

2、@LocalStorageLink  —— 双项数据同步

  1. // import { Child } from '../components/Example'
  2.  
  3. let storage = new LocalStorage({ 'PropA': 47 });
  4.  
  5. @Component
  6. struct Child {
  7.   @LocalStorageLink('PropA') num2: number = 1;
  8.  
  9.   build() {
  10.     Button(`子组件${this.num2}`)
  11.       .onClick(() => {
  12.         this.num2 += 1;
  13.       })
  14.   }
  15. }
  16.  
  17. @Entry(storage)
  18. @Component
  19. struct CompA {
  20.   @LocalStorageLink('PropA') num1: number = 1;
  21.  
  22.   build() {
  23.     Column({ space: 15 }) {
  24.       Child()
  25.       Button(`父组件 ${this.num1}`)
  26.         .onClick(() => this.num1 += 1)
  27.     }
  28.   }
  29. }

AppStorage全局UI状态存储

概述

  • AppStorage是应用全局的状态存储，和LocalStorage不同的是LocalStorage是页面级的，用于页面内的数据共享，而AppStorage是应用于全局状态的共享。
  • AppStorage中也提供了两种同步类型：
    • @StorageProp：@StorageProp(key)是和AppStorage中key对应的属性建立单向数据同步。
    • @StorageLink：@StorageLink(key)是和AppStorage中key对应的属性建立双向数据同步。

1、@StorageProp —— 单项数据同步

  1. AppStorage.SetOrCreate('PropA', 47);
  2.  
  3. @Component
  4. struct Child {
  5.   @StorageProp('PropA') num2: number = 1;
  6.  
  7.   build() {
  8.     Button(`子组件${this.num2}`)
  9.       .onClick(() => {
  10.         this.num2 += 1;
  11.       })
  12.   }
  13. }
  14.  
  15.  
  16. @Entry()
  17. @Component
  18. struct CompA {
  19.   @StorageProp('PropA') num1: number = 1;
  20.  
  21.   build() {
  22.     Column({ space: 20 }) {
  23.       Child()
  24.       Button(`AppStorage ${this.num1}`)
  25.         .onClick(() => this.num1 += 1)
  26.  
  27.     }
  28.   }
  29. }

2、@StorageLink  —— 双项数据同步

  1. AppStorage.SetOrCreate('PropA', 47);
  2.  
  3. @Entry()
  4. @Component
  5. struct CompA {
  6.   @StorageLink('PropA') storLink: number = 1;
  7.  
  8.   build() {
  9.     Column({ space: 20 }) {
  10.       Button(`AppStorage ${this.storLink}`)
  11.         .onClick(() => this.storLink += 1)
  12.  
  13.     }
  14.   }
  15. }

总结：LocalStorage和AppStorage都是运行时内存的状态存储。

PersistentStorage持久化UI状态存储

概述

  • LocalStorage和AppStorage都是运行时的内存，在应用退出再次启动后，依然能保存选定的结果，这就需要用到PersistentStorage。
  • PersistentStorage将选定的AppStorage属性保留在设备磁盘上。
  1. PersistentStorage.PersistProp('aProp', 47);
  2.  
  3. @Entry
  4. @Component
  5. struct Index {
  6.   @StorageLink('aProp') num: number = 48
  7.  
  8.   build() {
  9.     Row() {
  10.       Column() {
  11.         // 应用退出时会保存当前结果。重新启动后，会显示上一次的保存结果
  12.         Button(`${this.num}`)
  13.           .onClick(() => {
  14.             this.num += 1;
  15.           })
  16.       }
  17.     }
  18.   }
  19. }

if/else

概述

  • 条件渲染使用if/else渲染对应状态下的ui内容。
  • 鸿蒙开发推荐使用if/else，不推荐使用switch。

ForEach

概述

  • 循环渲染，需要与容器组件配合使用。
  1. @Entry
  2. @Component
  3. struct Parent {
  4.   @State simpleList: Array<string> = ['one', 'two', 'three'];
  5.  
  6.   build() {
  7.     Row() {
  8.       Column() {
  9.         ForEach(this.simpleList,     // 数据源
  10.           (item: string) => {
  11.             Text(item).fontSize(32)  // 组件生成函数
  12.           },
  13.           (item: string) => item     // 键值生成函数：为数据源arr的每个数组项生成唯一且持久的键值。
  14.         )
  15.       }
  16.     }
  17.   }
  18. }
  19.

LazyForEach

概述

  • LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
  • LazyForEach必须在容器组件内使用，目前仅有List、Grid以及Swiper组件支持数据懒加载，其他组件仍然是一次性加载所有的数据。
  • LazyForEach在每次迭代中，必须创建且只允许创建一个子组件。
  1. class BasicDataSource implements IDataSource {
  2.   private listeners: DataChangeListener[] = []
  3.  
  4.   public totalCount(): number {
  5.     return 0
  6.   }
  7.  
  8.   public getData(index: number): any {
  9.     return undefined
  10.   }
  11.  
  12.   registerDataChangeListener(listener: DataChangeListener): void {
  13.     if (this.listeners.indexOf(listener) < 0) {
  14.       console.info('add listener')
  15.       this.listeners.push(listener)
  16.     }
  17.   }
  18.  
  19.   unregisterDataChangeListener(listener: DataChangeListener): void {
  20.     const pos = this.listeners.indexOf(listener);
  21.     if (pos >= 0) {
  22.       console.info('remove listener')
  23.       this.listeners.splice(pos, 1)
  24.     }
  25.   }
  26.  
  27.   notifyDataReload(): void {
  28.     this.listeners.forEach(listener => {
  29.       listener.onDataReloaded()
  30.     })
  31.   }
  32.  
  33.   notifyDataAdd(index: number): void {
  34.     this.listeners.forEach(listener => {
  35.       listener.onDataAdd(index)
  36.     })
  37.   }
  38.  
  39.   notifyDataChange(index: number): void {
  40.     this.listeners.forEach(listener => {
  41.       listener.onDataChange(index)
  42.     })
  43.   }
  44.  
  45.   notifyDataDelete(index: number): void {
  46.     this.listeners.forEach(listener => {
  47.       listener.onDataDelete(index)
  48.     })
  49.   }
  50.  
  51.   notifyDataMove(from: number, to: number): void {
  52.     this.listeners.forEach(listener => {
  53.       listener.onDataMove(from, to)
  54.     })
  55.   }
  56. }
  57.  
  58. class MyDataSource extends BasicDataSource {
  59.   // 初始化数据列表
  60.   private dataArray: string[] = ['demo1', 'demo2', 'demo3', 'demo4']
  61.  
  62.   public totalCount(): number {
  63.     return this.dataArray.length
  64.   }
  65.  
  66.   public getData(index: number): any {
  67.     return this.dataArray[index]
  68.   }
  69.  
  70.   public addData(index: number, data: string): void {
  71.     this.dataArray.splice(index, 0, data)
  72.     this.notifyDataAdd(index)
  73.   }
  74.  
  75.   public pushData(data: string): void {
  76.     this.dataArray.push(data)
  77.     this.notifyDataAdd(this.dataArray.length - 1)
  78.   }
  79. }
  80.  
  81. @Entry
  82. @Component
  83. struct MyComponent {
  84.   private data: MyDataSource = new MyDataSource()
  85.  
  86.   build() {
  87.     List({ space: 3 }) {
  88.       LazyForEach(this.data, (item: string) => {
  89.         ListItem() {
  90.           Row() {
  91.             Text(item).fontSize(20).margin({ left: 10 })
  92.           }.margin({ left: 10, right: 10 })
  93.         }
  94.         .onClick(() => {
  95.           // 每点击一次列表项，数据增加一项
  96.           this.data.pushData(`demoVale：${this.data.totalCount()}`)
  97.  
  98.         })
  99.       }, item => item)
  100.     }.backgroundColor('red')
  101.   }
  102. }

应用/组件配置

概述

  • 应用图标、应用标签和入口图标、入口标签的配置，分别对应app.json5配置文件和module.json5配置文件文件中的icon和label标签。
  • 应用图标和标签是在设置应用中使用，例如设置应用中的应用列表。
  • 入口图标是应用安装完成后在设备桌面上中使用。

1、应用配置

2、入口配置

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/337242
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号