鸿蒙4.0开发笔记之ArkTS语法基础的UI描述、基础组件的使用与如何查看组件是否有参数(八)

文章目录

    • 一、声明式UI描述
      • 1、无/有参数组件
      • 2、如何查看组件是否有参数
    • 二、Image组件的使用
    • 三、组件的属性设置
    • 四、补充
      • 1、使用组件的成员函数配置组件的事件方法
      • 2、配置子组件
      • 3、多组件嵌套

一、声明式UI描述

在HarmonyOS的ArkTS语法中,万物皆组件。ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。根据组件构造方法的不同,创建组件包含有参数和无参数两种方式。

1、无/有参数组件

无参数组件:
如果组件的接口定义没有包含必选构造参数,则组件后面的“()”不需要配置任何内容。例如,Divider组件不包含构造参数:

Column() {Text('HarmonyOS')Divider()Button('点我跳转')
}

有参数组件:
如果组件的接口定义包含构造参数,则在组件后面的“()”配置相应参数。例如mage组件的必选参数src。

2、如何查看组件是否有参数

(1)方法一:
寻找官方文档:找到文档下面的“API参考”
1.1.1
在目录树下找到“组件参考”,然后找到“基础组件”,最后就可以看到如button这些基础组件的使用说明了。
1.1.2
(2)方法二:
按住Ctrl键,然后将鼠标移动到组件名上,会出现一个下划线,点击一下就能够进入组件的定义。
1.2.1
在组件的定义再用同样的方式(Ctrl+鼠标左键)进入接口的定义。
2.2.2
比如在接口的定义中就可以看到Text组件参数的设定:?表示可选参数,若要填参数则可以传递string和resource类型的参数。同样,在Divider的接口函数中则可以看到不需要传递参数。
1.2.3

二、Image组件的使用

1、定义
Image为图片组件,常用于在应用中显示图片。Image支持加载string、PixelMap和Resource类型的数据源,支持png、jpg、bmp、svg和gif类型的图片格式。

2、网络图片类型调用(网络图片需要权限)
使用网络图片时,需要申请权限ohos.permission.INTERNET。具体申请方式请参考权限申请声明。申请位置为entry>src>main>resources>module.json5文件中。
3.1.1
更多申请相关事项参见官方文档:访问控制授权申请
申请完网络权限后,就可以放心地使用网络图片作为image参数了。

3、资源文件类型的调用(使用$r(‘app.media.图片名’))
以下便是调用每个新建项目默认存在的图标图片icon.png:
3.3.1
运行效果:
3.3.2
4、引用其他路径下的资源

//Image组件调用其他路径下的图片:必须加扩展名Image($rawfile('bg.jpg'))

而且还需要注意,资源名不能包括中文。

三、组件的属性设置

1、链式语法
在同一行同时设定某个组件的多个属性,可以无限延伸下去。不过为了可读性,建议每设置一个属性换一行。

Text('声明式UI组件').fontSize(50).fontColor(Color.Green).fontWeight(FontWeight.Bold)

2、属性设置时做运算

//属性设置时做运算:偶数则将宽设置为200,奇数行则设置宽为300Image($rawfile('bg.jpg')).width(this.n%2 === 0 ? 200 : 300)

3、绑定事件
注意:需要在定义变量n时加上@State修饰,这表明当n值发生改变时,将重新渲染整个页面。

@State n: number = 7//绑定事件,每点击一次就加1Text("财富:" + this.n + "W").fontSize(30)Button('点我++').onClick(()=>{this.n++})

4、呈现效果
4.4.1

四、补充

1、使用组件的成员函数配置组件的事件方法

myClickHandler(): void {this.counter += 2;
}
...
Button('add counter').onClick(this.myClickHandler.bind(this))

2、配置子组件

如果组件支持子组件配置,则需在尾随闭包"{…}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。(在这里,Column组件可以用{space:50}来增加行距)

Column({space:50}) {Text('Hello').fontSize(100)Divider()Text(this.myText).fontSize(100).fontColor(Color.Red)
}

3、多组件嵌套

容器组件均支持子组件配置,可以实现相对复杂的多级嵌套。

Column() {Row() {Image('test1.jpg').width(100).height(100)Button('click +1').onClick(() => {console.info('+1 clicked!');})}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/201599.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Verilog】 FPGA程序设计---Verilog基础知识

目录 Verilog 和 VHDL 区别 Verilog 和 C 的区别 Verilog 基础知识 1 Verilog 的逻辑值 2 Verilog 的标识符 3 Verilog 的数字进制格式 4 Verilog 的数据类型 1) 寄存器类型 2) 线网类型 3) 参数类型 5 Verilog 的运算符 1) 算术运算符 2) 关系运算…

数据结构之选择排序

目录 直接选择排序 选择排序的时间复杂度 堆排序 向上调整算法 向下调整算法 向上调整算法建立堆 向下调整算法建立堆 堆排序整体代码 堆排序的时间复杂度 直接选择排序 在之前讲插入排序时,我们讲了这样的一个应用场景,我们在斗地主摸牌时&…

国产智能运维操作系统新选择-浪潮KeyarchOS

1.背景 在CentOS停更,国有企业纷纷摒弃原有的开发与运维工具,全面拥抱国产。我司也顺应号召,更换原有CentOS系统。 在新系统选型上,我司有以下要求: 国产、快速更新迭代、社区活跃;拥有一定知名度&#x…

保障海外业务发展,Coremail提供高效安全的海外通邮服务

11月22日,Coremail举办《全球通邮:如何保障安全、快捷的海外中继服务》直播分享会,直播会上Coremail安全团队和直播嘉宾复旦大学校园信息化办公室徐艺扬老师就海外中继服务进行了深度分享。 ​ 海外通邮困难重重 境外垃圾邮件数量居高不下…

echarts中option个参数的含义

var option {title: {text: ECharts 入门示例},tooltip: {},legend: {data: [数量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 数量,type: bar,data: [5, 20, 36, 10, 10, 20]}] }; title:主要控制图表的标题 legen…

语义分割 LR-ASPP网络学习笔记 (附代码)

论文地址:https://arxiv.org/abs/1905.02244 代码地址:https://github.com/WZMIAOMIAO/deep-learning-for-image-processing/tree/master/pytorch_segmentation/lraspp 1.是什么? LR-ASPP是一个轻量级语义分割网络,它是在Mobil…

【ESP8266】ESP8266集成开发环境对比

当涉及到ESP8266开发环境的选择时,有几个常见的选择可供开发人员使用。在本篇文章中,我们将对比一些目前最流行的ESP8266集成开发环境(IDE),以帮助您选择最适合您的需求的开发环境。 总结:Arduino IDE和Pl…

HarmonyOS应用开发——页面

我们将对于多页面以及更多有趣的功能展开叙述,这次我们对于 HarmonyOS 的很多有趣常用组件并引出一些其他概念以及解决方案、页面跳转传值、生命周期、启动模式(UiAbility),样式的书写、状态管理以及动画等方面进行探讨 页面之间…

项目进度已经落后了,项目经理该怎么办?

进度管理是项目管理的核心工作之一,通过可续的进度计划与控制管理,最终实现项目按照目标交付。 进度管理的两大核心工作:计划制定、过程管控。 项目管理过程中难免会遇到工作进度和计划不一致的情况,有效管理项目进度&#xff…

Redis安装和使用(基于windows)

Redis是一个使用C语言编写的开源、高性能、非关系型的键值对存储数据库。它支持多种数据结构,包括字符串、列表、集合、有序集合、哈希表等。Redis的内存操作能力极强,其读写性能非常优秀,且支持持久化,可以将数据存储到磁盘上&am…

使用 React 和 ECharts 创建地球模拟扩散和飞线效果

在本博客中,我们将学习如何使用 React 和 ECharts 创建一个酷炫的地球模拟扩散效果。我们将使用 ECharts 作为可视化库,以及 React 来构建我们的应用。地球贴图在文章的结尾。 最终效果 准备工作 首先,确保你已经安装了 React,并…

智能安全芯片ACH512芯片描述及功能

ACH512 芯片是一款基于安全算法的高性能 SOC 芯片, 主要应用于 eMMC/SD/Nandflash 大容量存储设备、加密 U 盘、指纹识别等市场。 芯片采用 32 位内核,片内集成多种安全密码模块,包括SM1、 SM2、 SM3、 SM4、 SSF33 算法以及RSA/ECC、 ECDSA、…

数据结构 | 二叉树的各种遍历

数据结构 | 二叉树的各种遍历 文章目录 数据结构 | 二叉树的各种遍历创建节点 && 创建树二叉树的前中后序遍历二叉树节点个数二叉树叶子节点个数二叉树第k层节点个数二叉树查找值为x的节点二叉树求树的高度二叉树的层序遍历判断二叉树是否是完全二叉树 我们本章来实现二…

同调群的维度 和 同调群的秩

同调群的维度是指同调群中非零元素的最小阶数。与线性代数中对向量空间的维度的理解类似。对同调群,k维同调群的维度是k。 同调群的秩是指同调群中的自由部分的维度。同调群通常包含自由部分和挠部分。同调群的秩是指同调群中自由部分的维度。对同调群,…

SQL SERVER 设置权限和隐藏其他数据库

一、创建用户名,选择默认数据库 二、分配权限 --对用户EAM分配 View_1视图 只有 只读select权限 GRANT select on View_1 to EAM --对用户分配指定表权限(读写删) GRANT SELECT , INSERT , UPDATE , DELETE ON table1 TO [用户名] --对用户分…

更改 Mac 所使用网络服务的顺序

如果以多种不同的方式(例如使用 Wi-Fi 或以太网)接入互联网或网络,你可以更改连接时电脑所尝试的网络连接顺序。 如果有多个活跃的连接,电脑会首先尝试列表顶部的连接,然后按降序尝试其他连接。 你不能更改虚拟专用网…

详解Python 迭代器介绍及作用

文章目录 迭代器:初探什么是迭代器?通过迭代器进行迭代迭代器 for 循环的工作构建自定义迭代器Python 无限迭代器Python 迭代器的好处总结关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包…

Linux下安装MySQL 5.6

1、下载二进制安装文件 使用wget下载MySQL 5.6.35二进制安装文件并存放在/root目录下。 wget https://downloads.mysql.com/archives/get/p/23/file/mysql-5.6.35-linux-glibc2.5-x86_64.tar.gz ll mysql-5.6.35-linux-glibc2.5-x86_64.tar.gz 2、创建mysql用户 先创建mysql…

【c语言指针详解】复杂数据结构的指针用法

目录 一、动态内存分配 1.1 使用malloc和free函数进行内存的动态分配和释放 1.2 内存泄漏和野指针的概念和解决方法 二、复杂数据结构的指针用法 2.1 结构体指针和成员访问操作符 2.2 指针数组和指向指针的指针 2.2.1 指针数组 2.2.2 指向指针的指针 2.3 动态内存分配与结构体指…

Vue项目解决van-calendar 打开下拉框显示空白(白色),需滑动一下屏幕,才可正常显示

问题描述,如图 ipad(平板)或者 H5移动端引入Vant组件的日历组件(van-calendar),初始化显示空白,需滚动一下屏幕,才可正常显示 解决方法 需在van-calendar上绑定open"openCalendar"事件…