第一个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 = [
"早餐晨练",
"准备早餐",
"阅读名著",
"学习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 = [
"早餐晨练",
"准备早餐",
"阅读名著",
"学习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
视频：
官网视频/