首页 > 其他分享 >ArkUI 组件基础 指南

ArkUI 组件基础 指南

时间:2023-08-02 14:47:26浏览次数:45  
标签:指南 函数 自定义 状态变量 UI 组件 ArkUI 弹窗

ArkTs 基础

常用组件

组件是构建页面的核心,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。

基础组件

Blank、Button、Checkbox、CheckboxGroup、DataPanel、DatePicker、Divider、Gauge、Image、ImageAnimator、LoadingProgress、Marquee、Navigation、Progress、QRCode、Radio、Rating、RichText、ScrollBar、Search、Select、Slider、Span、Stepper、StepperItem、Text、TextArea、TextClock、TextInput、TextPicker、TextTimer、TimePicker、Toggle、Web、XComponent

容器组件

AlphabetIndexer、Badge、Column、ColumnSplit、Counter、Flex、GridContainer、Grid、GridItem、List、ListItem、Navigator、Panel、Refresh、Row、RowSplit、Scroll、SideBarContainer、Stack、Swiper、Tabs、TabContent

媒体组件

Video

绘制组件

Circle、Ellipse、Line、Polyline、Polygon、Path、Rect、Shape

画布组件

Canvas

组件的组成

ArkTS通过struct声明组件名,并通过@Component和@Entry装饰器,来构成一个自定义组件。
使用@Entry和@Component装饰的自定义组件作为页面的入口,会在页面加载时首先进行渲染

组件的生命周期

自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期,这些回调函数是私有的,在运行时由开发框架在特定的时间进行调用,不能从应用程序中手动调用这些回调函数。

说明
允许在生命周期函数中使用Promise和异步回调函数,比如网络资源获取,定时器设置等;
aboutToAppear?(): void

aboutToAppear函数在创建自定义组件的新实例后,在执行其build()函数之前执行。允许在aboutToAppear函数中改变状态变量,更改将在后续执行build()函数中生效。

从API version 9开始,该接口支持在ArkTS卡片中使用。

aboutToDisappear?(): void

aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

从API version 9开始,该接口支持在ArkTS卡片中使用。

onPageShow?(): void

页面每次显示时触发一次,包括路由过程、应用进入前台等场景,仅@Entry装饰的自定义组件生效。

onPageHide?(): void

页面每次隐藏时触发一次,包括路由过程、应用进入前后台等场景,仅@Entry装饰的自定义组件生效。

onBackPress?(): void

当用户点击返回按钮时触发,仅@Entry装饰的自定义组件生效。

ArkTS声明式开发范式的基本组成说明如下

装饰器
用来装饰类、结构体、方法以及变量,赋予其特殊的含义,如上述示例中 @Entry 、 @Component 、 @State 都是装饰器。具体而言, @Component 表示这是个自定义组件; @Entry 则表示这是个入口组件; @State 表示组件中的状态变量,此状态变化会引起 UI 变更。

自定义组件
可复用的 UI 单元,可组合其它组件,如上述被 @Component 装饰的 struct Hello。

UI 描述
声明式的方式来描述 UI 的结构,如上述 build() 方法内部的代码块。

内置组件
框架中默认内置的基础和布局组件,可直接被开发者调用,比如示例中的 Column、Text、Divider、Button。

事件方法
用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如跟随在Button后面的onClick()。

属性方法
用于组件属性的配置,统一通过属性方法进行设置,如fontSize()、width()、height()、color() 等,可通过链式调用的方式设置多项属性。

@Builder装饰器:自定义构建函数

@Builder装饰的方法用于定义组件的声明式UI描述,在一个自定义组件内快速生成多个布局内容。

允许在自定义组件内定义一个或多个自定义构建函数,该函数被认为是该组件的私有、特殊类型的成员函数。
自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用,但不允许在组件外调用。
在自定义函数体中,this指代当前所属组件,组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。

全局的自定义构建函数可以被整个应用获取,不允许使用this和bind方法。
如果不涉及组件状态变化,建议使用全局的自定义构建方法。

参数传递规则
自定义构建函数的参数传递有按值传递和按引用传递两种,均需遵守以下规则:

参数的类型必须与参数声明的类型一致,不允许undefined、null和返回undefined、null的表达式。
在自定义构建函数内部,不允许改变参数值。如果需要改变参数值,且同步回调用点,建议使用@Link。
@Builder内UI语法遵循UI语法规则。
按引用传递参数
按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。

按值传递参数
调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时,状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候,推荐使用按引用传递。

Video

Dialog 弹窗

弹窗是一种模态窗口,通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消失之前,用户无法操作其他界面内容。ArkUI为我们提供了丰富的弹窗功能,弹窗按照功能可以分为以下两类:

确认类:例如警告弹窗AlertDialog。
选择类:包括文本选择弹窗TextPickerDialog 、日期滑动选择弹窗DatePickerDialog、时间滑动选择弹窗TimePickerDialog等

标签:指南,函数,自定义,状态变量,UI,组件,ArkUI,弹窗
From: https://www.cnblogs.com/cps666/p/17600612.html

相关文章

  • 数据存储 data指南
    数据存储示例指南数据管理为开发者提供数据存储、数据管理能力,比如联系人应用数据可以保存到数据库中,提供数据库的安全、可靠等管理机制。数据存储:提供通用数据持久化能力,根据数据特点,分为用户首选项、键值型数据库和关系型数据库。数据管理:提供高效的数据管理能力,包括权......
  • web组件
    web示例API加载在线网页Web组件的使用非常简单,只需要在Page目录下的ArkTS文件中创建一个Web组件,传入两个参数就可以了。其中src指定引用的网页路径,controller为组件的控制器,通过controller绑定Web组件,用于实现对Web组件的控制。//xxx.ets@Entry@ComponentstructWebCo......
  • win 11 无法安装ensp 组件VBox(版本过老)导致AR路由器报错 40,关闭win11 内存完整性 开关
        解决办法如下:1、先关闭内存完整性 2、重新安装vbox(成功) 3、启动ensp(无40报错) ......
  • 【MySQL技术专题】「问题实战系列」深入探索和分析MySQL数据库的数据备份和恢复实战开
    项目目标本次技术调研和分析报告,主要面向于总体分析和建立对应的MySQL数据库所需要从5.7版本升级到8.0版本后的Java应用服务项目的调整以及功能变动报告分析。MySQL8.0引入一些性能改进,例如新的查询优化器和索引算法。升级后,可以通过重新评估和优化项目中的SQL查询和索引来利用新......
  • 使用 Axios 进行 HTTP GET 请求的详尽指南
    在进行网络请求时,axios 是一个非常常用的请求库。本文将介绍如何使用axios发起GET请求,并详细列出传参的几种写法。同时会提供一个实践案例,其中包含基本路由与请求处理的过程,并确保在IDE编辑器中可以顺利运行。什么是axios的GET请求?在开始之前,让我们简要了解一下axios......
  • OpenCV实战:从图像处理到深度学习的全面指南
    本文深入浅出地探讨了OpenCV库在图像处理和深度学习中的应用。从基本概念和操作,到复杂的图像变换和深度学习模型的使用,文章以详尽的代码和解释,带领大家步入OpenCV的实战世界。1.OpenCV简介什么是OpenCV?OpenCV(OpenSourceComputerVisionLibrary)是一个开源的计算机视觉和......
  • 修正kube-prometheus中grafana组件自带dashboard的默认时区
    参考网址kube-prometheus项目中,默认dashboard时区是UTC,比中国时间慢了8小时,很不便于日常监控查看,如下图1.搜索timezone关键字眼grep-itimezonegrafana-dashboardDefinitions.yaml"timezone":"UTC","timezone":"UTC","ti......
  • OI 速通指南
    留给后人了属于是。来讲一讲如何速通OI吧。最优原地OI速通方法(AFO)原地退役。耗时:\(\epsilon\)。能够总结出来的好用的速通方法也就是上面那个了。不同人之间的思维方式差异较大,所以能够总结出来一个普适性的方法也是很不容易了。。。本来闲话里也有提到,有意向写一写经......
  • Wetab 标签页:内置多种免费实用优雅小组件的浏览器主页和起始页
    Wetab是什么?Wetab是一款基于浏览器的新标签页产品,主张辅助用户打造一个兼具效率与美观的主页。 Wetab的核心特色便是内置了多种实用、优雅的小组件。今天这篇,主要按照分类详细介绍 Wetab中的各个小组件的功能及使用示范。Wetab内置了多种小组件,包括AI小组件、日历、待办、......
  • Vue组件可以使用v-model实现双向数据绑定
    Vue组件可以使用v-model实现双向数据绑定。在组件中,可以在props中定义一个value属性,并在组件中的对应位置使用v-model进行绑定。例如:Copy<template><div><input:value="value"@input="$emit('input',$event.target.value)"></div></template......