第一个ArkTS项目实践-鸿蒙ArkTS
第一个ArkTS项目实践-ArkTS
- 第一个ArkTS项目实践-ArkTS
- 自定义组件的组成
- 配置属性与布局
- 配置属性
- 布局
- 改变组件状态
- 循环渲染列表数据
- 代码
- ToDoItem组件
- ToDoList页面
- 效果
- 参考资料
第一个ArkTS项目实践-ArkTS
本篇文章是官网上视频对ArkTS开发实践的第一个视频,主要是引导大家对ArkTS的一个了解。
开发文档官网

自定义组件的组成
ArkTS通过struct声明组件名,并通过@Component和@Entry装饰器,来构成一个自定义组件。
使用@Entry和@Component装饰的自定义组件作为页面的入口,会在页面加载时首先进行渲染。
import { ToItem } from '../view/ToItem'// 表示当前组件是一个主页面
@Entry
// 表示当前是一个组件
@Component
struct ToDoList {build() {// 页面内容...}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElcBw0BK-1692021004323)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814205246074.png)]
图中有重复的内容显示,可以通过创建组件配合ForEach来完成。
// 组件注释
@Component
export struct ToItem{build(){}
}

图片中的选中和未选择状态可以通过定义变量进行在样式中判断。
@Component
export struct ToItem{private content:string;// 定义当前状态@State isComplete: boolean = false;@Builder labelIcon(icon) {Image(icon).width(20)}build(){Row(){// 通过判断当前的状态进行显示指定图片效果if(this.isComplete){this.labelIcon($r('app.media.radio_on'))}else {this.labelIcon($r('app.media.radio_off'))}// 文字...}}
}
配置属性与布局
配置属性
自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求,ArkTS提供了属性方法用于描述界面的样式。属性方法支持以下使用方式:
常量传递
例如使用fntSize(50)来配置字体大小
Text('Hello World').fontSize(50)
变量传递
通过定义变量可以在当前组件内通过 this 进行拿取到对应变量的值。
@Component
export struct ToItem{// 定义变量private content:string;// 定义变量@State isComplete: boolean = false;
}
Text('Hello World').frontSize(this.size)
链式调用
在多个属性时,ArkTS提供了链式调用的方式,通过’.'方式连续配置。
Text('Hello World').fontSize(this.size)// 宽度默认单位vp.width(100)// 高度默认单位vp.height(100)
表达式传递
属性中还可传入普通表达式以及三目运算表达式。
Text('Hello World').fontSize(this.size).width(this.count + 100).height(this.count % 2 === 0 ? 100 : 200)
内置枚举类型
ArkTS中提供了内置枚举类型,如Color,FontWeight等,例如设置fontColor改变字体颜色为红色,并私有fontWeight为加粗。
Text('Hello World').fontSize(this.size).width(this.count + 100).height(this.count % 2 === 0 ? 100 : 200)// 设置字体颜色.fontColor(Color.Red)// 设置字体粗细.fontWeight(FontWeight.Bold)
布局
ArkTS中的布局方式有两种分别时水平和垂直。
布局公共属性
-
alignItems
在Row上设置子组件在垂直方向上的对齐格式。
在Column上设置子组件的水平方向上的对齐格式。
默认值:VerticalAlign.Center
VerticalAlign.Top
VerticalAlign.Bottom
-
justifyContent
在Row上设置子组件在水平方向上的对齐格式。
在Column上设置子组件垂直方向上的对齐格式。
默认值:FlexAlign.Start
FlexAlign.Center 居中对齐
FlexAlign.End
Row水平布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HfFBfJw6-1692021004324)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814211205501.png)]
Row(){Image($r('app.media.radio_on'))...Text(this.content)...}
}
Column垂直布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRt49LPt-1692021004324)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814211359185.png)]
Column() {Text('待办').... ForEach(this.totalTasks, (item) => {ToItem({content: item})},....)}
改变组件状态
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXk9lGmc-1692021004325)(D:\work\鸿蒙开发APP\第一个ArkTs项目实践.assets\image-20230814212726895.png)]
在实际的开发中由于交互的需求,需求页面中的内产生一个状态的改变。需要通过定义变量完成不过需要加上 @State 注解。
声明式UI的特点就是UI是随数据更改而自动刷新的,我们这里定义了一个类型为boolean的变量isComplete,其被@State装饰后,框架内建立了数据和视图之间的绑定,其值的改变影响UI的显示。
// @State 装饰器的作用主要是在数据发生改变时能调用页面的build进行页面UI更新
@State isComplete : boolean = false;
由于两个Image的实现具有大量重复代码,ArkTS提供了@Builder装饰器,来修饰一个函数,快速生成布局内容,从而可以避免重复的UI描述内容。这里使用@Bulider声明了一个labelIcon的函数,参数为url,对应要传给Image的图片路径。
@Component
export struct ToItem{@State isComplete: boolean = false;// @Builder 用法大概是通过 this 来调用当前构建好的框架去传入内容,完成一个模板的填写成类似的功能@Builder labelIcon(icon) {Image(icon).width(20)}build(){Row(){if(this.isComplete){this.labelIcon($r('app.media.radio_on'))}else {this.labelIcon($r('app.media.radio_off'))}...}}
}
为了让待办项带给用户的体验更符合已完成的效果,给内容的字体也增加了相应的样式变化,这里使用了三目运算符来根据状态变化修改其透明度和文字样式,如opacity是控制透明度,decoration是文字是否有划线。通过isComplete的值来控制其变化。
- TextDecorationType.None** 文字没有任何效果
- TextDecorationType.LineThrough 文字中间横穿一条线
- TextDecorationType.Underline 文字底部一条线
- TextDecorationType.Overline 文字顶部一条线
Text(this.content).fontSize(20).margin({left:15}).opacity(this.isComplete ? 0.4 : 1).decoration({type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None})
最后,为了实现与用户交互的效果,在组件上添加了onClick点击事件,当用户点击该待办项时,数据isComplete的更改就能够触发UI的更新。
@Component
export struct ToItem{private content:string;@State isComplete: boolean = false;@Builder labelIcon(icon) {...}build(){Row(){if(this.isComplete){this.labelIcon($r('app.media.radio_on'))}else {this.labelIcon($r('app.media.radio_off'))}...}....onClick(() => {this.isComplete = !this.isComplete})}
}
循环渲染列表数据
我们通过创建好的ToDoItem组件开发,通过ForEach循环显示多条数据。
totalTasks: Array<string> = ["早餐晨练","准备早餐","阅读名著","学习ArkTs","看剧轻松"]
代码
ToDoItem组件
@Component
export struct ToItem{private content:string;@State isComplete: boolean = false;@Builder labelIcon(icon) {Image(icon).width(20)}build(){Row(){if(this.isComplete){this.labelIcon($r('app.media.radio_on'))}else {this.labelIcon($r('app.media.radio_off'))}Text(this.content).fontSize(20).margin({left:15}).opacity(this.isComplete ? 0.4 : 1).decoration({type: this.isComplete ? TextDecorationType.Overline : TextDecorationType.None})}.backgroundColor("#fff").borderRadius(24).padding(25).margin(10).width("93%").onClick(() => {this.isComplete = !this.isComplete})}
}
ToDoList页面
import { ToItem } from '../view/ToItem'
@Entry
@Component
struct ToDoList {totalTasks: Array<string> = ["早餐晨练","准备早餐","阅读名著","学习ArkTs","看剧轻松"]build() {Row() {Column() {Text('待办').fontSize(28).fontWeight(FontWeight.Bold).margin({top:30,bottom: 20}).width("80%")ForEach(this.totalTasks, (item) => {ToItem({content: item})})}.height("100%").width("100%").backgroundColor("#efefef")}.justifyContent(FlexAlign.)}
}
效果

参考资料
文档:
开发文档官网
官网文档
https://blog.csdn.net/qq_57985179/article/details/128953555
视频:
官网视频/
相关文章:
第一个ArkTS项目实践-鸿蒙ArkTS
第一个ArkTS项目实践-ArkTS 第一个ArkTS项目实践-ArkTS自定义组件的组成配置属性与布局配置属性布局 改变组件状态循环渲染列表数据代码ToDoItem组件ToDoList页面 效果参考资料 第一个ArkTS项目实践-ArkTS 本篇文章是官网上视频对ArkTS开发实践的第一个视频,主要是引…...
【数据结构•堆】序列和的前n小元素(堆排序)
题目描述 问题:序列和的前 n n n小元素 给出两个长度为 n n n的有序表 A A A和 B B B, 在A和B中各任取一个, 可以得到 n 2 n^2 n2 个和. 求这些和最小的 n n n个。 输入输出格式 输入格式: 输入数据共三行。 第一行,一个整数值 n n …...
Keepalived+http高可用实战
环境准备: 两台安装了keepalived的服务器 ip:192.168.134.170;192.168.134.172 1、安装http服务 yum install httpd -y2、写一个测试页面 [rootlocalhost ~]# echo "hostname -I,web1 test page. " > /var/www/html/inde [rootlocalho…...
Linux文件系统管理
Linux文件系统管理 磁盘的组成与分区 计算机用于存取文件的硬件是磁盘,磁盘的组成主要有磁盘盘、机械手臂、磁盘读取头与主轴马达所组成, 而数据的写入其实是在磁盘盘上面。磁盘盘上面又可细分出扇区(Sector)与磁道(Track)两种单位, 其中扇区…...
MyBatis-Plugin源码全面分析
三、MyBatis-Plugin 1. 基本开发方式 需求:在MyBatis执行之前打印一行醒目的日志,携带参数 实现Interceptor接口: Intercepts(Signature(type Executor.class,method "query",args {MappedStatement.class,Object.class, RowB…...
Vscode 常用操作教程
一、语言换成中文 这是我们可以直接点击左边栏第四个图标搜索插件 chinese ,也可以直接ctrlshiftp快捷键也会出来如图所示图标,出来chinese 插件之后选择安装install,安装完成之后重新ctrlshiftp会出现如图所示页面 找到我的鼠标在的地方对应的中文,此时…...
Linux设备树详解
Linux 设备树详解 Linux 操作系统早期是针对个人电脑设备而开发的操作系统,而个人电脑处理器产商较为单一(例如只有 Intel,AMD)同时个人电脑产商均使用 Intel 或 AMD 制造的处理器,业界形成了统一的总线/硬件接口标准…...
.netcore grpc服务端流方法详解
一、服务端流式处理概述 客户端向服务端发送请求,服务端可以将多个消息流式传输回调用方和客户端流相反,客户端流发出请求,服务端可以传输一批消息给客户端,直至本次请求响应完全结束。针对文件分段传输下载,该方式非…...
python爬虫数据解析xpath、jsonpath,bs4
数据的解析 解析数据的方式大概有三种 xpathJsonPathBeautifulSoup xpath 安装xpath插件 打开谷歌浏览器扩展程序,打开开发者模式,拖入插件,重启浏览器,ctrlshiftx,打开插件页面 安装lxml库 安装在python环境中的Scri…...
go语言的database/sql结合squirrel工具sql生成器完成数据库操作
database/sql database/sql是go语言内置数据库引擎,使用sql查询数据库,配置datasource后使用其数据库操作方法对数据库操作,如下: package mainimport ("database/sql""fmt"_ "github.com/Masterminds…...
LVS集群和分布式
LVS 一.集群和分布式概念 1.1 集群 在计算机领域,集群早在 1960 年就出现,随着互联网和计算机相关技术的发展,现在 集群这一技术已经在各大互联网公司普及。 1.1.1 集群概念 计算机集群指一组通过计算机网络连接的计算机,它们…...
使用QT可视化设计对话框详细步骤与代码
一、创建对话框基本步骤 创建并初始化子窗口部件把子窗口部件放到布局中设置tab键顺序建立信号-槽之间的连接实现对话框中的自定义槽 首先前面三步在这里是通过ui文件里面直接进行的,剩下两步则是通过代码来实现 二、项目创建详细步骤 创建新项目 为项目命名 为…...
TFTP Server
简介 TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂、开销不大的文件传输服务。端口号为69。 TFTP和FTP的区别 安全性区别 FTP支持登录安全&…...
登录验证码实现
Hutool代码改造 Hutool 有参考文档;很多工具类;把一些功能都封装好;都不用你自己去写;直接调用它的工具类 它这里会详细告诉你引入方式Hutool <dependency><groupId>cn.hutool</groupId><artifactId>hu…...
2. 获取自己CSDN文章列表并按质量分由小到大排序(文章质量分、博客质量分、博文质量分)(阿里云API认证)
文章目录 写在前面步骤打开CSDN质量分页面粘贴查询文章url按F12打开调试工具,点击Network,点击清空按钮点击查询是调了这个接口https://bizapi.csdn.net/trends/api/v1/get-article-score用postman测试调用这个接口(不行,认证不通…...
在Windows和MacOS环境下实现批量doc转docx,xls转xlsx
一、引言 Python中批量进行办公文档转化是常见的操作,在windows状态下我们可以利用changeOffice这个模块很快进行批量操作。 二、在Windows环境下的解决文案 Windows环境下,如何把doc转化为docx,xls转化为xlsx? 首先ÿ…...
【网络编程(二)】NIO快速入门
NIO Java NIO 三大核心组件 Buffer(缓冲区):每个客户端连接都会对应一个Buffer,读写数据通过缓冲区读写。Channel(通道):每个channel用于连接Buffer和Selector,通道可以进行双向读…...
【Vue-Router】嵌套路由
footer.vue <template><div><router-view></router-view><hr><h1>我是父路由</h1><div><router-link to"/user">Login</router-link><router-link to"/user/reg" style"margin-left…...
MySQL索引总结
MySQL索引总结 1.索引的概念、作用与使用场景 本质上就是减少读写磁盘的次数。 索引是一种特殊的文件,包含这对数据表中所有记录的引用指针,可以对表中的一列或多列创建索引,并指定索引的类型,每种类型都有对应数据结构实现。 …...
谷粒商城第十二天-基本属性销售属性管理功能的实现
目录 一、总述 二、前端部分 三、后端部分 四、总结 一、总述 前端的话,依旧是直接使用老师给的。 前端的话还是那些增删改查,业务复杂一点的话,无非就是设计到多个字段多个表的操作,当然这是后端的事了,前端这里…...
渗透测试新手必练的10个靶场:从DVWA到Active的四阶实战路径
1. 为什么这10个靶场不是“随便选的”,而是新手绕不开的实战起点刚入行做渗透测试的朋友,常会陷入一个典型误区:花大量时间看漏洞原理、背命令、刷CTF题,却迟迟不敢碰真实靶机。我带过不少实习生,第一周让他们连上一个…...
低查重AI写教材秘诀大揭秘!高效工具助你快速生成专业教材
一、AI教材写作的现状与需求 在编写教材之前,选择合适的工具常常让人感到无比纠结!如果用普通的办公软件,功能显得太过于简单,想要搭建框架或者规范格式,都只能依靠手工操作;而如果选择了专业的教材编写工…...
Mac Mouse Fix技术架构深度解析:如何通过系统级事件拦截实现鼠标功能增强
Mac Mouse Fix技术架构深度解析:如何通过系统级事件拦截实现鼠标功能增强 【免费下载链接】mac-mouse-fix Mac Mouse Fix - Make Your $10 Mouse Better Than an Apple Trackpad! 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 在macOS生…...
Real-ESRGAN-GUI终极指南:免费AI图像增强工具,让模糊图片秒变高清
Real-ESRGAN-GUI终极指南:免费AI图像增强工具,让模糊图片秒变高清 【免费下载链接】Real-ESRGAN-GUI Lovely Real-ESRGAN / Real-CUGAN GUI Wrapper 项目地址: https://gitcode.com/gh_mirrors/re/Real-ESRGAN-GUI 你是否曾经遇到过这样的情况&am…...
动力系统与机器学习融合:破解Sabra壳模型自相似爆破的非唯一性
1. 项目概述:当湍流奇点遇上动力系统与机器学习在流体动力学的世界里,有限时间奇点(Blowup)的形成一直是个迷人的谜题。想象一下,一个初始光滑的流体运动,在有限时间内,其速度或涡量等物理量突然…...
DCT 变换:揭秘那个让一张图片“瘦身“百倍的数学魔法
一、一个让我"开窍"的乐队演奏故事 我有个学音乐的朋友,他给我讲过一个让我至今难忘的故事。他说有一次他听一支交响乐团演奏贝多芬的《第五交响曲》,指挥家在排练时做了一个特别有趣的"游戏"——他让乐团分别只演奏不同乐器组的声音…...
JMeter性能测试实战:从接口验证到分布式压测全链路
1. 这不是“点点点就能跑通”的工具,而是你接口质量的守门人很多人第一次打开 JMeter,以为它就是个“高级版 Postman”——填 URL、选方法、点执行,看到绿色小对勾就以为测试完成了。我带过三届测试团队,每届都有至少两个新人在压…...
AI Agent 在工具调用失败时,如何设计一个智能的降级策略?
这个问题挺关键的,工具调用失败在 AI Agent 系统里是常态,不是异常。核心思路是——先分类,再分级,最后兜底。 我之前做 Agent 编排系统的时候,工具调用成功率大概在 85% 左右,剩下 15% 都得靠降级策略兜住。如果没设计好,整个 Agent 就会频繁报错,用户体验很差。 第一步:错误…...
魔兽争霸3终极优化指南:5分钟解决画面拉伸、帧率限制与中文兼容问题
魔兽争霸3终极优化指南:5分钟解决画面拉伸、帧率限制与中文兼容问题 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为经典游戏魔兽争…...
5分钟快速上手:AMD Ryzen处理器硬件调试完整指南
5分钟快速上手:AMD Ryzen处理器硬件调试完整指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gitcode…...
