一、背景
ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言。ArkTS圍繞應(yīng)用開發(fā)在TypeScript（簡稱TS）生態(tài)基礎(chǔ)上做了進(jìn)一步擴(kuò)展，繼承了TS的所有特性，是TS的超集。
二、基本語法
2.1、基本語法介紹
ArkTS的基本組成，資料來自官網(wǎng)：文檔中心
說明：
①裝飾器：用來裝飾類結(jié)構(gòu)、方法、變量
@Component表示自定義組件，@Entry表示該自定義組件為入口組件，@State表示組件中的狀態(tài)變量,狀態(tài)變量變化會觸發(fā)UI刷新。
②自定義組件：可復(fù)用的UI單元
③UI描述：以聲明式的方式來描述UI的結(jié)構(gòu)，例如build()方法中的代碼塊。
④系統(tǒng)組件：ArkUI提供的組件
容器組件---用來完成頁面布局，例如Row、Column
基礎(chǔ)組件---自帶樣式和功能的頁面元素，例如Text
⑤事件方法：設(shè)置組件的事件回調(diào)
⑥屬性方法：設(shè)置組件的UI樣式
2.2、聲明式UI
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message) // Text組件有參數(shù)
.fontSize(50) //給Text組件配置屬性--字體大小
.fontWeight(FontWeight.Bold) //給Text組件配置屬性--字體粗細(xì)
//給Text組件配置點(diǎn)擊事件
.onClick(() => {
this.message = 'Hello ArkTS'
})
Divider() // Divider組件無參數(shù)
}
.width('100%')
}
.height('100%')
}
}2.2.1、參數(shù)
①有參數(shù)
如果組件的接口定義包含構(gòu)造參數(shù)，則在組件后面的“()”配置相應(yīng)參數(shù)。例如Text組件??
②無參數(shù)
如果組件的接口定義沒有包含必選構(gòu)造參數(shù)，則組件后面的“()”不需要配置任何內(nèi)容。例如，Divider組件不包含構(gòu)造參數(shù)??
2.2.2、配置屬性
屬性方法以“.”鏈?zhǔn)秸{(diào)用的方式配置系統(tǒng)組件的樣式和其他屬性，建議每個屬性方法單獨(dú)寫一行。
例如：Text組件配置的字體大小和字體粗細(xì)??
2.2.3、配置事件
事件方法以“.”鏈?zhǔn)秸{(diào)用的方式配置系統(tǒng)組件支持的事件，建議每個事件方法單獨(dú)寫一行。
例如：給Text組件配置點(diǎn)擊時間，當(dāng)點(diǎn)擊后，文字從'Hello World' 變成 'Hello ArkTS'??
2.2.4、配置子組件
如果組件支持子組件配置，則需在尾隨閉包"{...}"中為組件添加子組件的UI描述。Column、Row、Stack、Grid、List等組件都是容器組件。
以上代碼是簡單的Column組件配置子組件的示例??
容器組件均支持子組件配置，可以實(shí)現(xiàn)相對復(fù)雜的多級嵌套。??
@Entry
@Component
struct InfoPage {
build() {
Column() {
Row() {
Image($r('app.media.icon'))
.width(100)
.height(100)
Button('確定')
.onClick(() => {
console.log('1111')
})
}
}
}
}三、 自定義組件
在ArkUI中，UI顯示的內(nèi)容均為組件，由框架直接提供的稱為系統(tǒng)組件，由開發(fā)者定義的稱為自定義組件。
自定義組件具有以下特點(diǎn)：
- 可組合：允許開發(fā)者組合使用系統(tǒng)組件、及其屬性和方法。
- 可重用：自定義組件可以被其他組件重用，并作為不同的實(shí)例在不同的父組件或容器中使用。
- 數(shù)據(jù)驅(qū)動UI更新：通過狀態(tài)變量的改變，來驅(qū)動UI的刷新。
以下是自定義組件Header，默認(rèn)導(dǎo)出?
@Component
export default struct Header {
build() {
Row(){
Image($r('app.media.ic_public_back'))
.width(30)
Blank()
Image($r('app.media.ic_public_refresh'))
.width(30)
}
.width('100%')
}
}?例如：在首頁中引入自定義組件Header使用
四、裝飾器
示例代碼：
import Header from '../common/Header'
class Item {
name: string
image: ResourceStr
price: number
discount: number
constructor(name: string, image: ResourceStr, price: number,discount: number = 0) {
this.name = name
this.image = image
this.price = price
this.discount = discount
}
}
@Entry
@Component
struct ListPage {
// 商品數(shù)據(jù)
private items:Array<Item> = [
new Item('MateBookProX', $r('app.media.mateBookProX'),6999,600),
new Item('Mate X5', $r('app.media.mateX5'),13999)
]
// 局部公共樣式函數(shù)
@Styles fillScreen(){
.width('100%')
.height('100%')
.backgroundColor('#EFEFEF')
.padding(20)
}
build() {
Column({space:8}) {
// 頂部
Header()
.margin({bottom: 20})
// 商品列表部分
List({space: 8}){
ForEach(this.items,(item:Item) => {
ListItem(){
Row({space: 10}){
Image(item.image)
.width(100)
Column({space: 4}){
if(item.discount){
Text(item.name)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Text('原價：￥' + item.price)
.fontColor('#CCC')
.fontSize(14)
.decoration({type: TextDecorationType.LineThrough})
Text('折扣價：￥' + (item.price - item.discount))
.fontColor('#F36')
.fontSize(18)
Text('補(bǔ)貼：￥' + item.discount)
.fontColor('#F36')
.fontSize(18)
}else{
Text(item.name)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Text('￥' + item.price)
.fontColor('#F36')
.fontSize(18)
}
}
.height('100%')
.alignItems(HorizontalAlign.Start)
}
.width('100%')
.backgroundColor('#FFF')
.borderRadius(20)
.height(120)
.padding(10)
}
})
}
.width('100%')
.layoutWeight(1)
}
.fillScreen()
}
}4.1、@Builder裝飾器：自定義構(gòu)建函數(shù)
@Builder所裝飾的函數(shù)遵循build()函數(shù)語法規(guī)則，可以將重復(fù)使用的UI元素抽象成一個方法，在build方法里調(diào)用。
需求：目前的代碼較長，為了提高可讀性，便把商品卡片這一行封裝成自定義構(gòu)建函數(shù)
實(shí)現(xiàn)方式1：定義全局自定義構(gòu)建函數(shù)ItemCard()，再到商品列表中進(jìn)行引入，如下：
實(shí)現(xiàn)方式2：定義局部自定義構(gòu)建函數(shù)ItemCard()，再到商品列表中進(jìn)行引入，如下：
全局自定義構(gòu)建函數(shù)與局部自定義構(gòu)建函數(shù)的區(qū)別：
全局：是定義在組件外部的，需在方法名前面添加function關(guān)鍵字，如@Builder function ItemCard(){}，調(diào)用時??ItemCard()
局部：是定義在組件內(nèi)部的，不需在方法名前面添加function關(guān)鍵字，如@Builder ItemCard(){}，調(diào)用時需要加上this，??this.ItemCard()
4.2、@Styles裝飾器：定義組件重用樣式?
@Styles裝飾器可以將多條樣式設(shè)置提煉成一個方法，直接在組件聲明的位置調(diào)用。通過@Styles裝飾器可以快速定義并復(fù)用自定義樣式。用于快速定義并復(fù)用自定義樣式。
需求：將Column的樣式定義為自定義樣式
實(shí)現(xiàn)方式1：定義全局公共樣式函數(shù)fillScreen()，再引入到Column中使用
實(shí)現(xiàn)方式2：定義局部公共樣式函數(shù)fillScreen()，再引入到Column中使用
全局公共樣式函數(shù)與局部公共樣式函數(shù)的區(qū)別：
全局：是定義在組件外部的，需在方法名前面添加function關(guān)鍵字，如@Styles function fillScreen(){}，調(diào)用時???.fillScreen()
局部：是定義在組件內(nèi)部的，不需在方法名前面添加function關(guān)鍵字，如@Styles fillScreen(){}，調(diào)用時???.fillScreen()
4.3、@Extend裝飾器：定義擴(kuò)展組件樣式
@Styles用于樣式的擴(kuò)展，@Extend用于擴(kuò)展原生組件樣式。
規(guī)則：和@Styles不同，@Extend僅支持定義在全局，不支持在組件內(nèi)部定義。
需求：多個Text的樣式一致，使用@Extend定義擴(kuò)展組件樣式
實(shí)現(xiàn)：
文章來源：http://www.zghlxwxcb.cn/news/detail-829317.html
最后：??????????????文章來源地址http://www.zghlxwxcb.cn/news/detail-829317.html
到了這里，關(guān)于【鴻蒙系統(tǒng)學(xué)習(xí)筆記】ArkTS開發(fā)語言的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
