第一個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上設置子組件在垂直方向上的對齊格式。
  默認值：VerticalAlign.Center

  VerticalAlign.Top

  VerticalAlign.Bottom

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

  默認值：HorizontalAlign.Center

  HorizontalAlign.Start

  HorizontalAlign.End

• 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

視頻：

? 官網視頻/