ArkTS
ArkTs 是Harmonyos 優(yōu)選的主力應(yīng)用開發(fā)語言。arkTs 圍繞應(yīng)用開發(fā)在Typescript(簡稱 TS)生態(tài)基礎(chǔ)上做了進一步擴展，繼承了Ts的所有特性膘魄，是 TS 的超集阔馋。因此扔罪，在學(xué)習(xí)ArkTS語言之前稿静，建議開發(fā)者具備S語言開發(fā)能力梭冠。
當(dāng)前，ArkTS 在TS的基礎(chǔ)上主要擴展了如下能力:
基本語法:ArkTS,定義了聲明式U描述改备、自定義組件和動態(tài)擴展 UI 元素的能力,再配合AKUI開發(fā)框架中的系統(tǒng)組件及其相關(guān)的事件方法控漠、屬性方法等共同構(gòu)成了UI 開發(fā)的主體。
狀態(tài)管理:ArkTS 提供了多維度的狀態(tài)管理機制悬钳。在UI開發(fā)框架中盐捷，與UI相關(guān)聯(lián)的數(shù)據(jù)可以在組件內(nèi)使用，也可以在不同組件層級間傳遞默勾，比如父子組件之間碉渡、爺孫組件之間，還可以在應(yīng)用全局范圍內(nèi)傳遞或跨設(shè)備傳遞母剥。另外爆价，從數(shù)據(jù)的傳遞形式來看，可分為只讀的單向傳遞和可變更的雙向傳遞媳搪。開發(fā)者可以靈活的利用這些能力來實現(xiàn)數(shù)據(jù)和UI的聯(lián)動
渲染控制:ArkTS 提供了渲染控制的能力铭段。條件渲染可根據(jù)應(yīng)用的不同狀態(tài)，渲染對應(yīng)狀態(tài)下的UI內(nèi)容秦爆。循環(huán)渲染可從數(shù)據(jù)源中迭代獲取數(shù)據(jù)序愚，并在每次迭代過程中創(chuàng)建相應(yīng)的組件。數(shù)據(jù)懶加載從數(shù)據(jù)源中按需迭代數(shù)據(jù)等限，并在每次迭代過程中創(chuàng)建相應(yīng)的組件爸吮。
ArkTS基本語法
基本語法概述
在初步了解了 AEkTS 語言之后，我們以一個具體的示例來說明rkTs 的基不組成望门。該案例中當(dāng)開發(fā)者點擊按鈕時形娇，文本內(nèi)容從“Helloworld”變?yōu)椤癏ello ArkUI工創(chuàng)建步驟如下
首先我們新創(chuàng)建一個項目MyApp02
在index.js文件當(dāng)中
入口就是一打開App所看見的頁面
@Entry
@Component
struct Index {
? @State message: string = 'Hello World'
? build() {
? ? Row() {
? ? ? Column() {
? ? ? ? Text(this.message)
? ? ? ? ? .fontSize(50)
? ? ? ? ? .fontWeight(FontWeight.Bold)
? ? ? }
? ? ? .width('100%')
? ? }
? ? .height('100%')
? }
}
// 所有帶@符號的都屬于裝飾器
//
// Index是我們自定義的組件名稱
//
// message: string 是定義的一個變量
//
// @State 裝飾器 表示他是一個狀態(tài)變量 （好處可以當(dāng)變量的值發(fā)生變化的時候，變量所對應(yīng)的組件頁面會自動進行刷新）對應(yīng)的Index組件
//
// build() 以聲明式的的方式來描述UI結(jié)構(gòu)
//
// Row()內(nèi)置組件 代表一行
//
// Column()內(nèi)置組件? 表示一列
//
// Text(this.message)：所要展示的值
//
// .fontSize(50) 顯示的字體大小 單位是像素
//
// fontWeight 表示顯示的字體
//
// width('100%') 表示Column() 這一列的寬占頁面的100%
//
// height('100%')? 表示build() 這一行的高 占頁面100%
實現(xià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('點擊')
? ? ? ? ? .onClick(() => { //點擊箭頭函數(shù)
? ? ? ? ? ? this.pweaon_name = "李四" //點擊一下給他重新賦值 然后因為@State監(jiān)聽pweaon_name所以會自動進行刷新
? ? ? ? ? })
? ? ? ? ? .height(50) //高
? ? ? ? ? .width(100) //寬
? ? ? ? ? .margin({ top: 20 }) //
? ? ? }
? ? }
? }
}
使用模擬器進行運行之后：
基本內(nèi)容
裝飾器: 用于裝飾類筹误、結(jié)構(gòu)桐早、方法以及變量，并賦予其特殊的含義厨剪。如上述示例中@Entry哄酝、@Component和@state 都是裝飾器，@Component 表示自定義組件祷膳，@Entry 表示該自定義組件為入口組件陶衅，@state表示組件中的狀態(tài)變量，狀態(tài)變量變化會觸發(fā) UI刷新直晨。
UI 描述:以聲明式的方式來描述 UI的結(jié)構(gòu)搀军，例如 build()方法中的代碼塊膨俐。←自定義組件:可復(fù)用的UI單元罩句，可組合其他組件吟策，如上述被@Component裝飾的struct Hello。
系統(tǒng)組件:ArkUI框架中默認(rèn)內(nèi)置的基礎(chǔ)和容器組件的止，可直接被開發(fā)者調(diào)用檩坚，比如示例中的Column、Text诅福、Divider匾委、Button。
屬性方法:組件可以通過鏈?zhǔn)秸{(diào)用配置多項屬性氓润，如ontsize()赂乐、width()、height()咖气、backgroundColor()等挨措。
事件方法:組件可以通過鏈?zhǔn)秸{(diào)用設(shè)置多個事件的響應(yīng)邏輯，如跟隨在Button后面的 onclick()
系統(tǒng)組件崩溪、屬性方法浅役、事件方法具體使用可參考基于ArkTs的聲明式開發(fā)范式。除此之外伶唯，ArkTS擴展了多種語法范式來使開發(fā)更加便捷:
@Builder/@BuilderParam:特殊的封裝UI描述的方法觉既，細粒度的封裝和復(fù)用UI描述。
@Extend/@style:擴展內(nèi)置組件和封裝屬性樣式乳幸，更靈活地組合內(nèi)置組件瞪讼。
“statestyles:多態(tài)樣式，可以依據(jù)組件的內(nèi)部狀態(tài)的不同粹断，設(shè)置不同樣式符欠。
聲明式UI概述
ArkTS以聲明方式組合和擴展組件來描述應(yīng)用程序的UI，同時還提供了基本的屬性瓶埋、事件和子組件配置方法希柿，幫助開發(fā)者實現(xiàn)應(yīng)用交互邏輯
如果組件的接口定義沒有包含必選構(gòu)造參數(shù)，則組件后面的“()”不需要配置任何內(nèi)容悬赏。例如狡汉，Divider組件不包含構(gòu)造參數(shù):
Column() //無參數(shù)代碼塊
Text('item') //文本框的組件
Divider()//分割線的組件
@Entry //裝飾器
@Component? //自定義一個組件
struct? UIText1{? //寫組件內(nèi)容
? build(){//相當(dāng)于一個組件小集合
? ? ? Column(){
? ? ? ? Text("Hello text1")? //文本組件
? ? ? ? Divider() //分割線組件
? ? ? ? Text("Hello text2")
? ? ? }
? }
}
編寫完成之后
可以在右邊查看效果
接下來我們練習(xí)一下有圖片的樣式
//有圖片和文本的樣式
@Entry //裝飾器
@Component? //自定義一個組件
struct? UIText1{? //寫組件內(nèi)容
? textValue= 'hello'
? textSize: number =50? //定義變量? 字體大小
? imageHeight = 800? ? // 圖片高度
? imageWidth =500? ? ? //圖片寬度
? build(){//相當(dāng)于一個組件小集合
? ? ? Column(){
? ? ? ? Text(this.textValue)//文本組件
? ? ? ? ? ? .fontSize(this.textSize)? //文本顯示出來的字體大小
? ? ? ? ? ? .fontColor(Color.Green)? ? //文本顯示的顏色
? ? ? ? ? ? .fontWeight(FontWeight.Bold) //文本顯示字體類型（粗體）
? ? ? ? Image('http://easyimg.zhouchenji.com/i/2024/03/19/xltk19.jpg') //圖片組件
? ? ? ? ? ? //設(shè)置圖片樣式
? ? ? ? ? ? .width(this.imageWidth)
? ? ? ? ? ? .height(this.imageHeight)
? ? ? }
? }
}
