第一個ArkTS項(xiàng)目實(shí)踐-ArkTS

本篇文章是官網(wǎng)上視頻對ArkTS開發(fā)實(shí)踐的第一個視頻，主要是引導(dǎo)大家對ArkTS的一個了解。

開發(fā)文檔官網(wǎng)

自定義組件的組成

ArkTS通過struct聲明組件名，并通過@Component和@Entry裝飾器，來構(gòu)成一個自定義組件。

使用@Entry和@Component裝飾的自定義組件作為頁面的入口，會在頁面加載時首先進(jìn)行渲染。

import { ToItem } from '../view/ToItem'// 表示當(dāng)前組件是一個主頁面
@Entry
// 表示當(dāng)前是一個組件
@Component
struct ToDoList {build() {// 頁面內(nèi)容...}
}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ElcBw0BK-1692021004323)(D:\work\鴻蒙開發(fā)APP\第一個ArkTs項(xiàng)目實(shí)踐.assets\image-20230814205246074.png)]

圖中有重復(fù)的內(nèi)容顯示，可以通過創(chuàng)建組件配合ForEach來完成。

// 組件注釋
@Component
export struct  ToItem{build(){}
}

圖片中的選中和未選擇狀態(tài)可以通過定義變量進(jìn)行在樣式中判斷。

@Component
export struct  ToItem{private content:string;// 定義當(dāng)前狀態(tài)@State isComplete: boolean = false;@Builder labelIcon(icon) {Image(icon).width(20)}build(){Row(){// 通過判斷當(dāng)前的狀態(tài)進(jìn)行顯示指定圖片效果if(this.isComplete){this.labelIcon($r('app.media.radio_on'))}else {this.labelIcon($r('app.media.radio_off'))}// 文字...}}
}

配置屬性與布局

配置屬性

自定義組件的組成使用基礎(chǔ)組件和容器組件等內(nèi)置組件進(jìn)行組合。但有時內(nèi)置組件的樣式并不能滿足我們的需求，ArkTS提供了屬性方法用于描述界面的樣式。屬性方法支持以下使用方式：

常量傳遞

例如使用fntSize(50)來配置字體大小

Text('Hello World').fontSize(50)

變量傳遞

通過定義變量可以在當(dāng)前組件內(nèi)通過 this 進(jìn)行拿取到對應(yīng)變量的值。

@Component
export struct  ToItem{// 定義變量private content:string;// 定義變量@State isComplete: boolean = false;
}

Text('Hello World').frontSize(this.size)

鏈?zhǔn)秸{(diào)用

在多個屬性時，ArkTS提供了鏈?zhǔn)秸{(diào)用的方式，通過’.'方式連續(xù)配置。

Text('Hello World').fontSize(this.size)// 寬度默認(rèn)單位vp.width(100)// 高度默認(rèn)單位vp.height(100)

表達(dá)式傳遞

屬性中還可傳入普通表達(dá)式以及三目運(yùn)算表達(dá)式。

Text('Hello World').fontSize(this.size).width(this.count + 100).height(this.count % 2 === 0 ? 100 : 200)

內(nèi)置枚舉類型

ArkTS中提供了內(nèi)置枚舉類型，如Color，FontWeight等，例如設(shè)置fontColor改變字體顏色為紅色，并私有fontWeight為加粗。

Text('Hello World').fontSize(this.size).width(this.count + 100).height(this.count % 2 === 0 ? 100 : 200)// 設(shè)置字體顏色.fontColor(Color.Red)// 設(shè)置字體粗細(xì).fontWeight(FontWeight.Bold)

布局

ArkTS中的布局方式有兩種分別時水平和垂直。

布局公共屬性

• alignItems

  在Row上設(shè)置子組件在垂直方向上的對齊格式。

  在Column上設(shè)置子組件的水平方向上的對齊格式。

  默認(rèn)值：VerticalAlign.Center

  VerticalAlign.Top

  VerticalAlign.Bottom

• justifyContent

  在Row上設(shè)置子組件在水平方向上的對齊格式。

  在Column上設(shè)置子組件垂直方向上的對齊格式。

  默認(rèn)值：FlexAlign.Start

  FlexAlign.Center 居中對齊

  FlexAlign.End

Row水平布局

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-HfFBfJw6-1692021004324)(D:\work\鴻蒙開發(fā)APP\第一個ArkTs項(xiàng)目實(shí)踐.assets\image-20230814211205501.png)]

Row(){Image($r('app.media.radio_on'))...Text(this.content)...}
}

Column垂直布局

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-VRt49LPt-1692021004324)(D:\work\鴻蒙開發(fā)APP\第一個ArkTs項(xiàng)目實(shí)踐.assets\image-20230814211359185.png)]

Column() {Text('待辦')....  ForEach(this.totalTasks, (item) => {ToItem({content: item})},....)}

改變組件狀態(tài)

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-hXk9lGmc-1692021004325)(D:\work\鴻蒙開發(fā)APP\第一個ArkTs項(xiàng)目實(shí)踐.assets\image-20230814212726895.png)]

在實(shí)際的開發(fā)中由于交互的需求，需求頁面中的內(nèi)產(chǎn)生一個狀態(tài)的改變。需要通過定義變量完成不過需要加上 @State 注解。

聲明式UI的特點(diǎn)就是UI是隨數(shù)據(jù)更改而自動刷新的，我們這里定義了一個類型為boolean的變量isComplete，其被@State裝飾后，框架內(nèi)建立了數(shù)據(jù)和視圖之間的綁定，其值的改變影響UI的顯示。

// @State 裝飾器的作用主要是在數(shù)據(jù)發(fā)生改變時能調(diào)用頁面的build進(jìn)行頁面UI更新
@State isComplete : boolean = false;

由于兩個Image的實(shí)現(xiàn)具有大量重復(fù)代碼，ArkTS提供了@Builder裝飾器，來修飾一個函數(shù)，快速生成布局內(nèi)容，從而可以避免重復(fù)的UI描述內(nèi)容。這里使用@Bulider聲明了一個labelIcon的函數(shù)，參數(shù)為url，對應(yīng)要傳給Image的圖片路徑。

@Component
export struct  ToItem{@State isComplete: boolean = false;// @Builder 用法大概是通過 this 來調(diào)用當(dāng)前構(gòu)建好的框架去傳入內(nèi)容，完成一個模板的填寫成類似的功能@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'))}...}}
}

為了讓待辦項(xiàng)帶給用戶的體驗(yàn)更符合已完成的效果，給內(nèi)容的字體也增加了相應(yīng)的樣式變化，這里使用了三目運(yùn)算符來根據(jù)狀態(tài)變化修改其透明度和文字樣式，如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})

最后，為了實(shí)現(xiàn)與用戶交互的效果，在組件上添加了onClick點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊該待辦項(xiàng)時，數(shù)據(jù)isComplete的更改就能夠觸發(fā)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})}
}

循環(huán)渲染列表數(shù)據(jù)

我們通過創(chuàng)建好的ToDoItem組件開發(fā)，通過ForEach循環(huán)顯示多條數(shù)據(jù)。

totalTasks: Array<string> = ["早餐晨練","準(zhǔn)備早餐","閱讀名著","學(xué)習(xí)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> = ["早餐晨練","準(zhǔn)備早餐","閱讀名著","學(xué)習(xí)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.)}
}

效果

參考資料

文檔：

? 開發(fā)文檔官網(wǎng)

? 官網(wǎng)文檔

? https://blog.csdn.net/qq_57985179/article/details/128953555

視頻：

? 官網(wǎng)視頻/