ArkTS
ArkTs 是Harmonyos 優(yōu)選的主力應(yīng)用開(kāi)發(fā)語(yǔ)言。arkTs 圍繞應(yīng)用開(kāi)發(fā)在Typescript(簡(jiǎn)稱(chēng) TS)生態(tài)基礎(chǔ)上做了進(jìn)一步擴(kuò)展，繼承了Ts的所有特性，是 TS 的超集。因此，在學(xué)習(xí)ArkTS語(yǔ)言之前，建議開(kāi)發(fā)者具備S語(yǔ)言開(kāi)發(fā)能力。
當(dāng)前，ArkTS 在TS的基礎(chǔ)上主要擴(kuò)展了如下能力:
基本語(yǔ)法:ArkTS,定義了聲明式U描述、自定義組件和動(dòng)態(tài)擴(kuò)展 UI 元素的能力,再配合AKUI開(kāi)發(fā)框架中的系統(tǒng)組件及其相關(guān)的事件方法、屬性方法等共同構(gòu)成了UI 開(kāi)發(fā)的主體。
狀態(tài)管理:ArkTS 提供了多維度的狀態(tài)管理機(jī)制。在UI開(kāi)發(fā)框架中，與UI相關(guān)聯(lián)的數(shù)據(jù)可以在組件內(nèi)使用，也可以在不同組件層級(jí)間傳遞，比如父子組件之間、爺孫組件之間，還可以在應(yīng)用全局范圍內(nèi)傳遞或跨設(shè)備傳遞。另外，從數(shù)據(jù)的傳遞形式來(lái)看，可分為只讀的單向傳遞和可變更的雙向傳遞。開(kāi)發(fā)者可以靈活的利用這些能力來(lái)實(shí)現(xiàn)數(shù)據(jù)和UI的聯(lián)動(dòng)
渲染控制:ArkTS 提供了渲染控制的能力。條件渲染可根據(jù)應(yīng)用的不同狀態(tài)，渲染對(duì)應(yīng)狀態(tài)下的UI內(nèi)容。循環(huán)渲染可從數(shù)據(jù)源中迭代獲取數(shù)據(jù)，并在每次迭代過(guò)程中創(chuàng)建相應(yīng)的組件。數(shù)據(jù)懶加載從數(shù)據(jù)源中按需迭代數(shù)據(jù)，并在每次迭代過(guò)程中創(chuàng)建相應(yīng)的組件。
ArkTS基本語(yǔ)法
基本語(yǔ)法概述
在初步了解了 AEkTS 語(yǔ)言之后，我們以一個(gè)具體的示例來(lái)說(shuō)明rkTs 的基不組成。該案例中當(dāng)開(kāi)發(fā)者點(diǎn)擊按鈕時(shí)，文本內(nèi)容從“Helloworld”變?yōu)椤癏ello ArkUI工創(chuàng)建步驟如下
首先我們新創(chuàng)建一個(gè)項(xiàng)目MyApp02
在index.js文件當(dāng)中
入口就是一打開(kāi)App所看見(jiàn)的頁(yè)面
@Entry
@Component
struct Index {
? @State message: string = 'Hello World'
? build() {
? ? Row() {
? ? ? Column() {
? ? ? ? Text(this.message)
? ? ? ? ? .fontSize(50)
? ? ? ? ? .fontWeight(FontWeight.Bold)
? ? ? }
? ? ? .width('100%')
? ? }
? ? .height('100%')
? }
}
// 所有帶@符號(hào)的都屬于裝飾器
//
// Index是我們自定義的組件名稱(chēng)
//
// message: string 是定義的一個(gè)變量
//
// @State 裝飾器 表示他是一個(gè)狀態(tài)變量 （好處可以當(dāng)變量的值發(fā)生變化的時(shí)候，變量所對(duì)應(yīng)的組件頁(yè)面會(huì)自動(dòng)進(jìn)行刷新）對(duì)應(yīng)的Index組件
//
// build() 以聲明式的的方式來(lái)描述UI結(jié)構(gòu)
//
// Row()內(nèi)置組件 代表一行
//
// Column()內(nèi)置組件? 表示一列
//
// Text(this.message)：所要展示的值
//
// .fontSize(50) 顯示的字體大小 單位是像素
//
// fontWeight 表示顯示的字體
//
// width('100%') 表示Column() 這一列的寬占頁(yè)面的100%
//
// height('100%')? 表示build() 這一行的高 占頁(yè)面100%
實(shí)現(xiàn)一個(gè)簡(jiǎn)單點(diǎn)擊按鈕切換切換內(nèi)容：
@Entry
@Component
struct Hello {
? @State pweaon_name: string = '張三'
? build() {
? ? Row() {
? ? ? Column() {
? ? ? ? Text(`Hello ${this.pweaon_name} !`)
? ? ? ? ? .fontSize(50)
? ? ? ? ? .fontWeight(FontWeight.Bold)
? ? ? ? Divider() //Divider() 提供分隔器的組件（系統(tǒng)組件）
? ? ? ? Button('點(diǎn)擊')
? ? ? ? ? .onClick(() => { //點(diǎn)擊箭頭函數(shù)
? ? ? ? ? ? this.pweaon_name = "李四" //點(diǎn)擊一下給他重新賦值 然后因?yàn)锧State監(jiān)聽(tīng)pweaon_name所以會(huì)自動(dòng)進(jìn)行刷新
? ? ? ? ? })
? ? ? ? ? .height(50) //高
? ? ? ? ? .width(100) //寬
? ? ? ? ? .margin({ top: 20 }) //
? ? ? }
? ? }
? }
}
使用模擬器進(jìn)行運(yùn)行之后：
基本內(nèi)容
裝飾器: 用于裝飾類(lèi)、結(jié)構(gòu)、方法以及變量，并賦予其特殊的含義。如上述示例中@Entry、@Component和@state 都是裝飾器，@Component 表示自定義組件，@Entry 表示該自定義組件為入口組件，@state表示組件中的狀態(tài)變量，狀態(tài)變量變化會(huì)觸發(fā) UI刷新。
UI 描述:以聲明式的方式來(lái)描述 UI的結(jié)構(gòu)，例如 build()方法中的代碼塊?！远x組件:可復(fù)用的UI單元，可組合其他組件，如上述被@Component裝飾的struct Hello。
系統(tǒng)組件:ArkUI框架中默認(rèn)內(nèi)置的基礎(chǔ)和容器組件，可直接被開(kāi)發(fā)者調(diào)用，比如示例中的Column、Text、Divider、Button。
屬性方法:組件可以通過(guò)鏈?zhǔn)秸{(diào)用配置多項(xiàng)屬性，如ontsize()、width()、height()、backgroundColor()等。
事件方法:組件可以通過(guò)鏈?zhǔn)秸{(diào)用設(shè)置多個(gè)事件的響應(yīng)邏輯，如跟隨在Button后面的 onclick()
系統(tǒng)組件、屬性方法、事件方法具體使用可參考基于ArkTs的聲明式開(kāi)發(fā)范式。除此之外，ArkTS擴(kuò)展了多種語(yǔ)法范式來(lái)使開(kāi)發(fā)更加便捷:
@Builder/@BuilderParam:特殊的封裝UI描述的方法，細(xì)粒度的封裝和復(fù)用UI描述。
@Extend/@style:擴(kuò)展內(nèi)置組件和封裝屬性樣式，更靈活地組合內(nèi)置組件。
“statestyles:多態(tài)樣式，可以依據(jù)組件的內(nèi)部狀態(tài)的不同，設(shè)置不同樣式。
聲明式UI概述
ArkTS以聲明方式組合和擴(kuò)展組件來(lái)描述應(yīng)用程序的UI，同時(shí)還提供了基本的屬性、事件和子組件配置方法，幫助開(kāi)發(fā)者實(shí)現(xiàn)應(yīng)用交互邏輯
如果組件的接口定義沒(méi)有包含必選構(gòu)造參數(shù)，則組件后面的“()”不需要配置任何內(nèi)容。例如，Divider組件不包含構(gòu)造參數(shù):
Column() //無(wú)參數(shù)代碼塊
Text('item') //文本框的組件
Divider()//分割線(xiàn)的組件
@Entry //裝飾器
@Component? //自定義一個(gè)組件
struct? UIText1{? //寫(xiě)組件內(nèi)容
? build(){//相當(dāng)于一個(gè)組件小集合
? ? ? Column(){
? ? ? ? Text("Hello text1")? //文本組件
? ? ? ? Divider() //分割線(xiàn)組件
? ? ? ? Text("Hello text2")
? ? ? }
? }
}
編寫(xiě)完成之后
可以在右邊查看效果
接下來(lái)我們練習(xí)一下有圖片的樣式
//有圖片和文本的樣式
@Entry //裝飾器
@Component? //自定義一個(gè)組件
struct? UIText1{? //寫(xiě)組件內(nèi)容
? textValue= 'hello'
? textSize: number =50? //定義變量? 字體大小
? imageHeight = 800? ? // 圖片高度
? imageWidth =500? ? ? //圖片寬度
? build(){//相當(dāng)于一個(gè)組件小集合
? ? ? Column(){
? ? ? ? Text(this.textValue)//文本組件
? ? ? ? ? ? .fontSize(this.textSize)? //文本顯示出來(lái)的字體大小
? ? ? ? ? ? .fontColor(Color.Green)? ? //文本顯示的顏色
? ? ? ? ? ? .fontWeight(FontWeight.Bold) //文本顯示字體類(lèi)型（粗體）
? ? ? ? Image('http://easyimg.zhouchenji.com/i/2024/03/19/xltk19.jpg') //圖片組件
? ? ? ? ? ? //設(shè)置圖片樣式
? ? ? ? ? ? .width(this.imageWidth)
? ? ? ? ? ? .height(this.imageHeight)
? ? ? }
? }
}
