鸿蒙HarmonyOS4.0 -（ArkTs）

已于 2023-12-04 10:59:06 修改
阅读量2.5k 收藏 31
点赞数 43
文章标签： harmonyos 鸿蒙 鸿蒙系统
于 2023-11-30 10:17:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/davoid/article/details/134705152
版权

基本语法

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

@Entry
@Component
struct App {
  @State myText: string = 'HarmonyOS4.0';

  build() {
    Column() {
      Text(`${this.myText}`).fontSize(32).fontWeight(800)
      Button('点击').onClick(() => {
        this.myText = '欢迎使用鸿蒙'
      }).width(100).margin({top:20})
    }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)

  }
}

创建自定义组件

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

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

1、在入口组件内部使用自定义组建
@Component
struct ExanpleComponent {
  @State textValue: string = '组件状态'

  build() {
    Text(this.textValue)
      .fontSize(32)
      .fontWeight(600)
      .fontColor('#e33')
      .onClick(() => {
        this.textValue = '组件状态变化'
      })
  }
}

@Entry
@Component
struct App {
  @State myText: string = 'HarmonyOS4.0';

  build() {
    Column() {
      ExanpleComponent()
      Text(`${this.myText}`)
        .fontSize(32)
        .fontWeight(800)
      Button('点击')
        .width(100)
        .margin({ top: 20 })
        .onClick(() => {
          this.myText = '欢迎使用鸿蒙'
        })
    }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)

  }
}
2、从外部导入使用自定义组建

Index.ets @Entry入口文件

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

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

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

@Styles

注意：@Style不能有参数。

// 定义全局@style样式
@Styles function publicStyle() {
  .width('100%')
  .height('100%')
  .backgroundColor('#3ce')
}

@Entry
@Component
struct App {
  @State myText: string = 'HarmonyOS4.0';
  // 定义局部@style样式
  @Styles internalStyle(){
    .width(200)
    .margin({ top: 20 })
  }

  build() {
    Column() {
      Button(this.myText)
        .internalStyle()
        .fontSize(20)
        .onClick(() => {
          this.myText = '欢迎使用鸿蒙'
        })
    }.publicStyle().justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)

  }
}

@Extend

概念

  • 和@Style不同，@Extend仅支持定义在全局，不支持在组件内部定义。
  • 和@Style不同，@Extend装饰的方法支持参数，可以在调用时传递参数
// 定义全局@Extend样式
@Extend(Column) function publicStyle(width:string,height:string) {
  .width(width)
  .height(height)
  .backgroundColor('#3ae')
}

@Entry
@Component
struct App {
  @State myText: string = 'HarmonyOS4.0';

  build() {
    Column() {
      Button(this.myText)
        .fontSize(20)
        .onClick(() => {
          this.myText = '欢迎使用鸿蒙'
        })
    }.publicStyle('100%','100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}

stateStyles多态样式

概述

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

  • focused：获焦状态
  • normal：正常状态
  • pressed：按压状态
  • disabled：不可用状态
@Styles function focusedStyle() {
  .backgroundColor('red')
}

@Entry
@Component
struct App {
  @State myText: string = 'HarmonyOS4.0';
  @Styles  pressedStyle() {
  .backgroundColor('green')
}
  build() {
    Column() {
      Button(this.myText)
        .fontSize(20)
        .stateStyles({
          focused: focusedStyle,
          pressed: this.pressedStyle,
          normal: {
            .backgroundColor('blue')
          },
        })
        .onClick(() => {
          this.myText = '欢迎使用鸿蒙'
        })
    }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}

@State状态管理

概念

  • 状态变量：被@State装饰的变量，状态变量的状态值的改变会引起UI的渲染更新。
  • 常规变量：没有被@State装饰的变量，它的改变永远不会引起UI的渲染更新。
@Component
struct MyComponent {
  @State count: number = 0;
  private increaseBy: number = 1;

  build() {
  }
}

@Component
struct Parent {
  build() {
    Column() {
      // 从父组件初始化，覆盖本地定义的默认值
      MyComponent({ count: 1, increaseBy: 2 })
    }
  }
}

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

概述

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

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

@Component
struct Child {
  @Prop count: number;

  build() {
    Column() {
      Text(`子组件： ${this.count} `)
      // @Prop装饰的变量不会同步给父组件
      Button(`子组件-1`).onClick(() => {
        this.count -= 1;
      }).margin({ top: 24 })
    }
  }
}

@Entry
@Component
struct Parent {
  @State num: number = 0;

  build() {
    Column() {
      Text(`父组件：${this.num}`)
      // 父组件的修改会同步给子组件
      Button(`父组件+1`).onClick(() => {
        this.num += 1;
      }).margin({ top: 24 })
      // 子组件
      Child({ count: this.num }).margin({ top: 24 })
    }.width('100%').justifyContent(FlexAlign.Center).margin({ top: 24 })

  }
}

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

概述

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

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

@Component
struct Child {
  @Link items: number[];

  build() {
    Column() {
      Button(`子元素修改数组`).onClick(() => {
        this.items = [100, 200, 300];
      })
      ForEach(this.items, item => {
        Text(`${item}`)
      })
    }
  }
}

@Entry
@Component
struct Parent {
  @State arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Button(`父元素修改数组`).onClick(() => {
        this.arr = [5, 6, 7];
      })
      ForEach(this.arr,
        item => {
          Text(`${item}`)
        }
      )
      Child({ items: $arr })


    }
  }
}

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

概述

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

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

@Component
struct CompD {
  // @Consume装饰的变量通过相同的属性名绑定其祖先组件CompA内的@Provide装饰的变量
  @Consume publicValue: number;
  build() {
    Column() {
      Text(`D组件${this.publicValue}`)
      Button(`D组件按钮-1`)
        .onClick(() => this.publicValue -= 1)
    }
    .width('50%')
  }
}

@Component
struct CompC {
  build() {
    CompD()
  }
}

@Component
struct CompB {
  build() {
    CompC()
  }
}

@Entry
@Component
struct CompA {
  // @Provide装饰的变量publicValue由入口组件CompA提供其后代组件
  @Provide publicValue: number = 0;

  build() {
    Column() {
      Text(`A组件${this.publicValue}`)
      Button(`A组件按钮+1`)
        .onClick(() => this.publicValue += 1)
      CompB()
    }
  }
}

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

概述

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

注意：

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

@Watch监听状态的变化

概述

  • LocalStorage是页面级的UI存储，通过@Entry装饰器接收的参数可以在页面内共享一个LocalStorage实例。
@Entry
@Component
struct CompA {
  @Watch('change') @State count: number = 1

  change() {
    console.log(`状态变化${this.count}`)
  }

  build() {
    Column() {
      Button(`点击状态变化${this.count}`)
        .onClick(() => {
          this.count++
        })
    }
  }
}

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 —— 单项数据同步

// import { Child } from '../components/Example'

let storage = new LocalStorage({ 'PropA': 47 });

@Component
struct Child {
  @LocalStorageProp('PropA') num2: number = 1;

  build() {
    // 点击后，只改变当前组件显示的num2，不会同步到LocalStorage中
    Button(`子组件${this.num2}`)
      .onClick(() => {
        this.num2 += 1;
      })
  }
}

@Entry(storage)
@Component
struct CompA {
  @LocalStorageProp('PropA') num1: number = 1;

  build() {
    Column({ space: 15 }) {
      Child()
      // 点击后，只改变当前组件显示的num1，不会同步到LocalStorage中
      Button(`父组件 ${this.num1}`)
        .onClick(() => this.num1 += 1)
    }
  }
}

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

// import { Child } from '../components/Example'

let storage = new LocalStorage({ 'PropA': 47 });

@Component
struct Child {
  @LocalStorageLink('PropA') num2: number = 1;

  build() {
    Button(`子组件${this.num2}`)
      .onClick(() => {
        this.num2 += 1;
      })
  }
}

@Entry(storage)
@Component
struct CompA {
  @LocalStorageLink('PropA') num1: number = 1;

  build() {
    Column({ space: 15 }) {
      Child()
      Button(`父组件 ${this.num1}`)
        .onClick(() => this.num1 += 1)
    }
  }
}

AppStorage全局UI状态存储

概述

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

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

AppStorage.SetOrCreate('PropA', 47);

@Component
struct Child {
  @StorageProp('PropA') num2: number = 1;

  build() {
    Button(`子组件${this.num2}`)
      .onClick(() => {
        this.num2 += 1;
      })
  }
}


@Entry()
@Component
struct CompA {
  @StorageProp('PropA') num1: number = 1;

  build() {
    Column({ space: 20 }) {
      Child()
      Button(`AppStorage ${this.num1}`)
        .onClick(() => this.num1 += 1)

    }
  }
}

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

AppStorage.SetOrCreate('PropA', 47);

@Entry()
@Component
struct CompA {
  @StorageLink('PropA') storLink: number = 1;

  build() {
    Column({ space: 20 }) {
      Button(`AppStorage ${this.storLink}`)
        .onClick(() => this.storLink += 1)

    }
  }
}

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

PersistentStorage持久化UI状态存储

概述

  • LocalStorage和AppStorage都是运行时的内存，在应用退出再次启动后，依然能保存选定的结果，这就需要用到PersistentStorage。
  • PersistentStorage将选定的AppStorage属性保留在设备磁盘上。
PersistentStorage.PersistProp('aProp', 47);

@Entry
@Component
struct Index {
  @StorageLink('aProp') num: number = 48

  build() {
    Row() {
      Column() {
        // 应用退出时会保存当前结果。重新启动后，会显示上一次的保存结果
        Button(`${this.num}`)
          .onClick(() => {
            this.num += 1;
          })
      }
    }
  }
}

if/else

概述

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

ForEach

概述

  • 循环渲染，需要与容器组件配合使用。
@Entry
@Component
struct Parent {
  @State simpleList: Array<string> = ['one', 'two', 'three'];

  build() {
    Row() {
      Column() {
        ForEach(this.simpleList,     // 数据源
          (item: string) => {
            Text(item).fontSize(32)  // 组件生成函数
          },
          (item: string) => item     // 键值生成函数：为数据源arr的每个数组项生成唯一且持久的键值。
        )
      }
    }
  }
}

LazyForEach

概述

  • LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
  • LazyForEach必须在容器组件内使用，目前仅有List、Grid以及Swiper组件支持数据懒加载，其他组件仍然是一次性加载所有的数据。
  • LazyForEach在每次迭代中，必须创建且只允许创建一个子组件。
class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []

  public totalCount(): number {
    return 0
  }

  public getData(index: number): any {
    return undefined
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener')
      this.listeners.push(listener)
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener')
      this.listeners.splice(pos, 1)
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index)
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index)
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to)
    })
  }
}

class MyDataSource extends BasicDataSource {
  // 初始化数据列表
  private dataArray: string[] = ['demo1', 'demo2', 'demo3', 'demo4']

  public totalCount(): number {
    return this.dataArray.length
  }

  public getData(index: number): any {
    return this.dataArray[index]
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data)
    this.notifyDataAdd(index)
  }

  public pushData(data: string): void {
    this.dataArray.push(data)
    this.notifyDataAdd(this.dataArray.length - 1)
  }
}

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource()

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(20).margin({ left: 10 })
          }.margin({ left: 10, right: 10 })
        }
        .onClick(() => {
          // 每点击一次列表项，数据增加一项
          this.data.pushData(`demoVale：${this.data.totalCount()}`)

        })
      }, item => item)
    }.backgroundColor('red')
  }
}

应用/组件配置

概述

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

1、应用配置

2、入口配置

猛男敲代码
关注
基于鸿蒙HarmonyOS，使用ArkTS开发纯净的浏览器（小狐狸浏览器）.zip
02-07
在本项目中，我们将探讨如何基于华为的鸿蒙HarmonyOS操作系统，利用 ArkTS 开发一个纯净的浏览器应用，以“小狐狸浏览器”为例。鸿蒙系统是华为面向物联网时代推出的一款全新分布式操作系统，旨在提供跨平台、跨设备...
HarmonyOS ArkTS与c++交互通信
Ada的专栏
12-01 4731
通过缓存的env，callback对象，调用napi_call_function方法将数据传回给ts。NAPI中缓存回调接口的变量，便于后面回调给TS。
【HarmonyOS NEXT】C++开发，如何调用ArkTS代码
Mayism123的博客
02-23 2056
在HarmonyOS中，C API中的N-API接口可以实现ArkTS/TS/JS与C/C++之间的交互。鸿蒙开发中C++如何调用ArkTS代码，例如C++回调如何通知到TS，能否给出实例。C++回调 / ArkTS / N-API。
详细教程 - 进阶版 鸿蒙harmonyOS应用 第十九节——鸿蒙OS图形图像技术深度指南
爱蹦跶的全栈大A阿
12-23 1882
图形图像技术是构建鸿蒙OS视觉交互的基石。它涵盖了图像处理、图形渲染、动画特效等多种能力。随着智能设备的普及,高质量的图像处理与图形渲染成为了提升用户体验的重要一环。鸿蒙系统提供了丰富的graphics图形图像API,通过OpenGL ES与自研引擎为开发者提供强大支持。本文将深入解析图像处理的主要操作、OpenGL ES的渲染原理、动画与特效的实现方法以及相机对接等内容,帮助开发者掌握鸿蒙OS强大的图形能力。图像处理的主要操作与功能OpenGL ES在鸿蒙OS的应用实现。
HarmonyOS鸿蒙学习笔记（5）@State作用说明和简单案例
菜鸟博客
08-26 3738
HarmonyOS @State使用说明
HarmonyOS应用开发者高级认证学习认证知识答疑笔记（十）
系统看你学习很认真，随机送了一个月会员！
03-11 4591
在Column和Row容器组件中，alignItems用于设置子组件在主轴方向上的对齐格式，justifyContent用于设置子组件在交叉轴方向上的对齐格式错误(False)B. singleton为单实例模式，系统中只存在唯一一个实例，statAbility时，如果已存在，则复用系统中的唯一一个实例。A. Column容器的主轴是垂直方向，交叉轴是水平方向: Row容器的主轴是水平方向，交叉轴是垂直方向。首选项preferences是以Key-Value形式存储数据，其中Key是可以重复。
HarmonyOS-ArkTS-待办列表源码
12-21
ArkTS语法：ArkTS是HarmonyOS的主要应用开发语言。ArkTS基于TypeScript（简称TS）语言扩展而来，是TS的超集。 Text组件：显示一段文本的组件。 Column组件：沿垂直方向布局的容器。 Row组件：沿水平方向布局的容器。
HarmonyOS 4.0小米6刷机包
02-19
你们要的小米6鸿蒙4.0来辣！！！基于毛子GSI开包制作 bug：一堆，懒得挨个说了娱乐娱乐想刷可以，日用就算了，别刷.
基于harmonyos-arkTs开发的高仿微信app软件+源码+文档
最新发布
07-06
基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+源码+文档 基于harmonyos-arkTs开发的高仿微信app软件+...
HarmonyOS鸿蒙ArkTS证件照生成模板
02-04
HarmonyOS鸿蒙操作系统引入了一种新的编程语言——ArkTS，它是专门为HarmonyOS设计的，旨在提高开发效率和跨平台兼容性。 ArkTS是TypeScript的方言，它结合了JavaScript的灵活性和静态类型的强安全性，使得开发人员...
鸿蒙开发已解决-ArkTS@State 数组无法触发重绘
一键难忘的博客
01-09 1424
问题的核心在于正确处理对象和数组的链接以及在循环渲染时使用正确的键。通过这些调整，可以确保在ArkTS中正确触发重绘，使页面能够及时反映数据的变化。经过验证，问题确实是由于对foreach的键处理不当引起的。事实上，正常的写法不应该是将列表传递给子组件，而应该在父组件中进行循环，然后在子组件中渲染项目。如果项目是对象，则应使用@ObjectLink进行装饰。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Refresh）
m0_64420071的博客
03-15 2389
ArkTS声明式开发（容器组件：Refresh）
【OpenHarmony 北向应用开发】Arkts服务卡片数据每秒刷新的实现
weixin_74292291的博客
12-21 986
参考: 开发者文档，实现Arkts服务卡片数据每秒刷新
鸿蒙 Text 控件的各种用法
xq610928的博客
04-30 1125
Text Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。 支持的XML属性 Text的共有XML属性继承自：Component 创建Text 这里主要讲到的都是 以xml形式为例 java 代码创建也是可以的 在layout目录下的xml文件中创建Text组件。 <Text ohos:id="$+id:text" ohos:width="match_content"
【HarmonyOS】【ArkTS】如何使用HTTP网络请求获取动态数据刷新UI界面
热门推荐
Mayism123的博客
06-07 1万+
在使用ArkTS开发HarmonyOS应用时，需要调用HTTP网络请求 @ohos.net.http 动态获取数据，进行UI列表刷新，这想必是应用开发最常见的功能。但是根据官网网络请求的示例代码进行功能开发时，封装方法进行HTTP请求后，返回获取数据总是为空，无法返回调用接口获取的结果，经过一系列步骤检查，终于获取到数据，在此附上我的开发步骤、一些注意事项以及参考文档。步骤4：获取到dataList数组后，就可以通过ForEach循环显示组件和数据啦，到此就完成HTTP网络请求动态数据获取刷新UI界面啦。
鸿蒙 HarmonyOS ArkTS 弹窗、带点击回调
特创数字
01-23 897
鸿蒙 HarmonyOS ArkTS 弹窗、带点击回调
【中秋国庆不断更】OpenHarmony多态样式stateStyles使用场景
OpenHarmony_dev的博客
10-01 448
下面的示例展示了stateStyles最基本的使用场景。Button处于第一个组件，默认获焦，生效focused指定的粉色样式。如果在Button前再放一个组件，使其不处于获焦态，就会生效normal态的黄色。@Styles和@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式。stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。以下示例通过@Styles指定stateStyles的不同状态。
ArkTs 状态管理
qq_38690457的博客
01-03 1921
(类似@Link 的双向同步（不用传递参数所以使用的代价是浪费资源）)
OpenHarmony 项目实战-基于ArkUI（TS）声明式开发：列表下拉刷新、上拉加载更多
shudaoshanQAQ的博客
01-03 1237
2、touch触摸事件：1—>手指移动下拉改变偏移量，2—>手指抬起根据是否可以刷新：显示刷新状态，3—>请求数据成功后，关闭刷新状态。2、touch触摸事件：1—>手指移动上拉改变偏移量进行判断是否显示布局，2—>手指抬起偏移量置为0，请求数据成功后，关闭刷新状态。1、布局结构，就是在List末尾加上ListItem()，当到了最后一位，偏移量达到加载更多的条件，动态显示布局。到达条件：如果一直下拉，下拉偏移量缓慢增加（阻力效果），手指抬起偏移量回到下拉刷新布局高度，等待主动关闭刷新。
鸿蒙HarmonyOS ArkTS开发详解与资源指南
"鸿蒙HarmonyOS开发学习笔记包含了组件用法、参数、属性的详细介绍，补充了官网课程未涵盖的内容，旨在帮助开发者更高效地使用ArkTS进行鸿蒙应用开发。笔记提到了DevEco Studio的安装配置，以及工程和模块的文件目录...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猛男敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值