HarmonyOS NEXT 实战系列04-组件状态

简介: 本文介绍了ArkUI中组件状态的三种装饰器:@State、@Prop和@Link。@State用于定义状态变量,其变化驱动UI更新;@Prop实现父组件向子组件单向传值,子组件修改不会影响父组件;@Link则在父子组件间建立双向绑定,实现数据同步更新。通过示例代码详细展示了简单类型、对象类型及数组类型变量的操作方法,以及自定义组件的创建与复用,帮助开发者理解数据驱动UI的核心机制。

自定义组件拥有变量,变量必须被装饰器装饰才可以成为状态变量,状态变量的改变会引起UI的渲染刷新。如果不使用状态变量,UI只能在初始化时渲染,后续将不会再刷新。 下图展示了State和View(UI)之间的关系。

View(UI):UI渲染,指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。
State:状态,指驱动UI更新的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。

  1. 组件状态-@State
    @State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就可以触发其直接绑定UI组件的刷新。当状态改变时,UI会发生对应的渲染改变。

简单类型变量
@Entry
@Component
struct TestPage {
@State
count: number = 0

build() {
Column({ space: 50 }) {
Row() {
Text('-')
.textButton()
.onClick(() => {
this.count--
})
Text(this.count.toString())
.padding(15)
Text('+')
.textButton()
.onClick(() => {
this.count++
})
}
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

对象类型变量
@Entry
@Component
struct TestPage {
@State
students: string[] = ['小红', '小明']

build() {
Column({ space: 10 }) {
ForEach(this.students, (item: string, i) => {
Row({ space: 10 }){
Text(item)
Text('-')
.textButton()
.onClick(() => {
// 从索引x处,删除x条
this.students.splice(i, 1)
})
}
})
Button('添加学生')
.onClick(() => {
// 追加
this.students.push('小芳')
})
}
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

数组类型变量
interface Person {
name: string
age: number
}

@Entry
@Component
struct TestPage {
@State
person: Person = { name: 'Jack', age: 18 }

build() {
Column({ space: 50 }) {
Row({ space: 10 }){
Text(this.person.name)
Text(this.person.age.toString())
Button('明年')
.onClick(() => {
this.person.age ++
})
}
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

  1. 组件状态-@Prop
    @Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。

1)自定义组件

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。

可组合:允许开发者组合使用系统组件、及其属性和方法。
可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。
@Component
struct MyComponent {
build() {
// 组件结构
}
}
尝试:提取 counter 组件

@Entry
@Component
struct TestPage {

build() {
Column({ space: 50 }) {
CounterComp()
CounterComp()
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Component
struct CounterComp {
@State count: number = 0

build() {
Row() {
Text('-')
.textButton()
.onClick(() => {
this.count--
})
Text(this.count.toString())
.padding(15)
Text('+')
.textButton()
.onClick(() => {
this.count++
})
}
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

2)父子单向同步

@Entry
@Component
struct TestPage {
@State count: number = 0

build() {
Column({ space: 50 }) {
// Prop 父传值给子
CounterComp({ count: this.count })
CounterComp({ count: this.count })
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Component
struct CounterComp {
@Prop @Require count: number

build() {
Row() {
Text('-')
.textButton()
.onClick(() => {
this.count--
})
Text(this.count.toString())
.padding(15)
Text('+')
.textButton()
.onClick(() => {
this.count++
})
}
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

注意:

虽然 @Prop 修饰的状态不会同步到父,但是字组件UI是会影响的
可以加上 @Require 代表必传,可省略初始值

  1. 组件状态-@Link
    子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

@Entry
@Component
struct TestPage {
@State count: number = 0

build() {
Column({ space: 50 }) {
// Link 父同步子,子同步父
CounterComp({ count: this.count })
CounterComp({ count: this.count })
}
.width('100%')
.height('100%')
.margin({ top: 50 })
}
}

@Component
struct CounterComp {
@Link count: number

build() {
Row() {
Text('-')
.textButton()
.onClick(() => {
this.count--
})
Text(this.count.toString())
.padding(15)
Text('+')
.textButton()
.onClick(() => {
this.count++
})
}
}
}

@Extend(Text)
function textButton() {
.fontSize(20)
.backgroundColor('#CCCCCC')
.width(32)
.aspectRatio(1)
.borderRadius(16)
.textAlign(TextAlign.Center)
}

————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
AI 代码解读

原文链接:https://blog.csdn.net/zsgzsgzsgzsgzsg/article/details/146183945

目录
打赏
0
2
2
0
28
分享
相关文章
HarmonyOS NEXT 实战系列09-生命周期
页面与组件生命周期介绍:页面生命周期(@Entry装饰)包含onPageShow、onPageHide、onBackPress等接口,分别在页面显示、隐藏和返回按钮点击时触发;组件生命周期(@Component装饰)包含aboutToAppear和aboutToDisappear,在组件创建与销毁时回调。示例代码展示了生命周期函数的使用场景及执行时机,帮助开发者更好地管理页面和组件状态。
HarmonyOS NEXT 实战系列09-生命周期
HarmonyOS NEXT 实战系列10-网络通信
本文介绍了网络通信相关知识,包括HTTP协议的工作原理、鸿蒙系统中HTTP模块的使用方法、Promise异步操作处理机制及async/await语法糖的应用,以及JSON数据格式的语法规则与转换方法。重点讲解了HTTP请求响应流程、鸿蒙开发中的网络权限申请与代码实现、Promise三种状态及创建方式,并通过示例说明异步编程技巧和JSON在数据传递中的应用。
24 10
|
2天前
|
HarmonyOS NEXT 实战系列-综合案例新闻页
本示例展示了如何通过 `ForEach` 遍历数据并结合 HTTP 请求动态渲染新闻列表。首先定义了 `News` 接口描述数据结构,接着在组件中使用 `List` 和 `ForEach` 渲染新闻项,包含标题、来源、评论数、时间和图片等信息。同时,通过 `http.createHttp()` 获取远程数据并更新列表。代码结构清晰,适配动态数据展示需求。
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
20 3
|
2天前
HarmonyOS NEXT 实战系列08-案例微博导航设置
本示例展示了如何通过 `PersistentStorage` 和 `AppStorage` 实现全局 UI 状态的持久化,并结合 `Tabs` 组件创建动态切换的首页导航栏。用户可在“视频”与“超话”间切换,状态自动保存。同时,通过 `router` 跳转至导航设置页 (`NavSetting.ets`) 完成选项修改,支持返回操作及对齐布局调整。代码涵盖基础组件用法,适合学习跨页面状态管理与 UI 设计。
HarmonyOS NEXT 实战系列07-应用状态
AppStorage 是应用全局的 UI 状态存储,支持跨 Ability 数据共享,提供 `setOrCreate` 和 `get` 方法管理全局状态,并通过 `@StorageProp` 和 `@StorageLink` 实现单向或双向数据同步至组件。PersistentStorage 基于 AppStorage,提供状态变量的持久化能力,可将选定属性保存到设备磁盘,但写操作同步执行,建议持久化数据小于 2KB,以避免影响 UI 渲染性能。相关持久化文件位于 `/data/app/el2/.../persistent_storage` 目录下。
uniapp 极速上手鸿蒙开发
uniapp 自版本 `4.28.2024092502` 起支持鸿蒙应用开发,现版本 `4.36.2024112817` 同时支持鸿蒙应用和元服务开发。本文介绍使用 HBuilderX 4.24+ 和 DevEco Studio 进行环境配置、项目创建及运行的详细步骤,涵盖从 AGC 平台新建项目、配置证书到最终运行项目的全流程,帮助开发者快速上手鸿蒙开发。注意:HBuilderX 4.31+ 构建的鸿蒙运行包不支持 x86_64 平台,需使用真机调试。
114 85
uniapp 极速上手鸿蒙开发
|
5天前
|
鸿蒙开发:自定义一个搜索模版
这样的一个模版,可以简单的分为,三个部分,分别是上边的搜索框,中间的历史搜索和下边的热门搜索,搜索框,我们直接可以使用系统的组件Search,历史搜索,由于是内容不一的搜索的内容,这里使用弹性布局Flex,下边的热门搜索,条目规格一致,这里我们直接使用Grid网格组件。
49 23
鸿蒙开发:自定义一个搜索模版
鸿蒙开发:ArkTs语言注释
关于注释,有一点需要注意,那就是,注释,不会被编译器或解释器执行,而本小节的重点并不是简单的教大家注释如何去写,而是在实际的项目中,我们能够真正的把注释投入到实际的开发中。
44 18
鸿蒙开发:ArkTs语言注释
鸿蒙开发:权限管理之权限声明
本文,主要简单概述了为什么要有权限管理,以及权限管理的声明原则,这些都是基本的概念内容,大家做为了解即可,重要的是怎么声明权限,在什么位置声明权限,这一点需要掌握。
47 16
鸿蒙开发:权限管理之权限声明

热门文章

最新文章

  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    27
  • 2
    uniapp 极速上手鸿蒙开发
    114
  • 3
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    27
  • 4
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
    27
  • 5
    鸿蒙开发:了解@Builder装饰器
    26
  • 6
    鸿蒙开发:wrapBuilder传递参数
    10
  • 7
    鸿蒙web加载本地网页资源异常
    12
  • 8
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    11
  • 9
    鸿蒙H5离线包技术分享
    4
  • 10
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    10
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等