????????從今天開始,博主將開設(shè)一門新的專欄用來講解市面上比較熱門的技術(shù) “鴻蒙開發(fā)”,對于剛接觸這項(xiàng)技術(shù)的小伙伴在學(xué)習(xí)鴻蒙開發(fā)之前,有必要先了解一下鴻蒙,從你的角度來講,你認(rèn)為什么是鴻蒙呢?它出現(xiàn)的意義又是什么?鴻蒙僅僅是一個手機(jī)操作系統(tǒng)嗎?它的出現(xiàn)能夠和Android和IOS三分天下嗎?它未來的潛力能否制霸整個手機(jī)市場呢?
抱著這樣的疑問和對鴻蒙開發(fā)的好奇,讓我們開始今天對ArkTS語言的了解以及對組件的掌握吧!
目錄
初識ArkTS語言
ArkUI基礎(chǔ)組件
Image(圖片顯示組件)
Text(文本顯示組件)
TextInput(文本輸入框)
Button(按鈕組件)
Slider(滑動條組件)
Column、Row(布局容器)
ForEach(循環(huán)控制)
List(列表容器)
ArkTS自定義組件
初識ArkTS語言
ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言,它在 TypeScript(簡稱TS) 的基礎(chǔ)上,匹配ArkUI框架,擴(kuò)展了聲明式UI、狀態(tài)管理等相應(yīng)的能力,讓開發(fā)者以更簡潔、更自然的方式開發(fā)跨端應(yīng)用。要了解什么是ArkTS,我們要先了解一下ArkTS、TypeScript 和 JavaScript 之間的關(guān)系,如下:
學(xué)習(xí)ArkTS之前還是推薦先了解并掌握一下?JS 和 TS ,這兩門語言的掌握再回頭看ArkTS的話可謂是上手很快了。ArkTS兼容TypeScript語言,拓展了聲明式UI、狀態(tài)管理、并發(fā)任務(wù)等能力。在學(xué)習(xí)ArkTS語言之前,建議開發(fā)者具備ts語言的開發(fā)能力,當(dāng)前ArkTS在ts的基礎(chǔ)上主要擴(kuò)展了如下能力:
基本語法:
ArkTS定義了聲明式 UI 描述、自定義組件和動態(tài)擴(kuò)展UI元素的能力,再配ArkUI開發(fā)框架中的系統(tǒng)組件及其相關(guān)的事件方法、屬性方法等共同構(gòu)成了UI開發(fā)的主體。
狀態(tài)管理:
ArkTS提供了多維度的狀態(tài)管理機(jī)制。在UI開發(fā)框架中,與UI相關(guān)聯(lián)的數(shù)據(jù)可以在組件內(nèi)使用,也可以在不同組件層級間傳遞,比如父子組件之間、爺孫組件之間,還可以在應(yīng)用全局范圍內(nèi)傳遞或跨設(shè)備傳遞。另外,從數(shù)據(jù)的傳遞形式來看,可分為只讀的單向傳遞和可變更的雙向傳遞。開發(fā)者可以靈活的利用這些能力來實(shí)現(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會結(jié)合應(yīng)用開發(fā)/運(yùn)行的需求持續(xù)演進(jìn),逐步提供并行和并發(fā)能力增強(qiáng)、系統(tǒng)類型增強(qiáng)、分布式開發(fā)范式等更多特性。
在ArkTS的布局結(jié)構(gòu)方面,開發(fā)者需要在頁面上聲明對應(yīng)的元素,其布局的結(jié)構(gòu)通常是分層級的,代表了用戶界面中的整體架構(gòu),一個常見的頁面結(jié)構(gòu)如下:
其中Page表示頁面的根節(jié)點(diǎn),Column/Row等元素為系統(tǒng)組件。針對不同的頁面結(jié)構(gòu),ArkUI提供了不同的布局組件來幫助開發(fā)者實(shí)現(xiàn)對應(yīng)布局的效果,例如Row用于實(shí)現(xiàn)線性布局等,我會給大家詳細(xì)講解對應(yīng)的布局。
ArkUI基礎(chǔ)組件
接下來將對ArkUI常用的基礎(chǔ)組件進(jìn)行一個簡單的演示與應(yīng)用,掌握ArkUI的基本使用。
Image(圖片顯示組件)
聲明Image組件并設(shè)置圖片源方式如下:
Image(src: string|PixelMap|Resource)
1)string格式,通常用來加載網(wǎng)絡(luò)圖片,需要申請網(wǎng)絡(luò)訪問權(quán)限:ohos.permission.INTERNET
Image('https://xxx.png')
打開?module.json5 文件夾下,配置如下 requestPermissions 選項(xiàng),可以看到圖片出現(xiàn)。
2)PixelMap格式,可以加載像素圖,常用在圖片編輯中
Image(pixelMapObject)
3)Resource格式,加載本地圖片,推薦使用
Image($r('app.media.mate'60.png)
Image($rawfile('mate60.png'))
Text(文本顯示組件)
Text(content?: string|Resource)
1)string格式,直接填寫文本內(nèi)容
Text('文本內(nèi)容')
2)Resource格式,讀取本地資源文件
Text($r('app.string.width_label'))
這里我們設(shè)置了一個動態(tài)的文本顯示:
TextInput(文本輸入框)
TextInput( {placeholder?: ResourceStr, text?: ResourceStr} )
1)placeHolder:輸入框無輸入時(shí)的提示文本
TextInput({placeholder: '請輸入賬號或手機(jī)號'})
2)text:輸入框當(dāng)前的文本內(nèi)容
TextInput({text: '文本內(nèi)容'})
比如我們用輸入框動態(tài)的改變一個圖片的大小操作如下:
下面是輸入框的各種類型描述:
名稱 | 描述 |
---|---|
Normal | 基本輸入模式。支持輸入數(shù)字、字母、下劃線、空格、特殊字符。 |
Password | 密碼輸入模式。支持輸入數(shù)字、字母、下劃線、空格、特殊字符。 |
郵箱地址輸入模式。支持?jǐn)?shù)字,字母,下劃線,以及@字符。 | |
Number | 純數(shù)字輸入模式。 |
PhoneNumber | 電話號碼輸入模式。支持輸入數(shù)字、+、-、*、#、長度不限。 |
Button(按鈕組件)
Button(label?: ResourceStr)
1)文字型按鈕
Button('點(diǎn)我')
2)自定義按鈕,在Button內(nèi)嵌套其它組件
Button(){
??????? Image($r('app.media.search')).width(20).margin(10)
}
比如我們用按鈕動態(tài)的改變一個圖片的大小操作如下:
下面是按鈕的各種類型描述:
名稱 | 描述 |
---|---|
Capsule | 膠囊型按鈕(圓角默認(rèn)為高度的一半)。 |
Circle | 圓形按鈕。 |
Normal | 普通按鈕(默認(rèn)不帶圓角)。 |
Slider(滑動條組件)
滑動條的組件的功能實(shí)現(xiàn)很簡單,只需要在Slider里面設(shè)置其功能,外部設(shè)置其樣式即可:
Column、Row(布局容器)
Column容器與Row容器其對應(yīng)的對齊方式使用的參數(shù)如下表格所示:
屬性方法名 | 說明 | 參數(shù) |
---|---|---|
justifyContent | 設(shè)置子元素在主軸方向的對齊格式 | FlexAlign枚舉 |
alignItems | 設(shè)置子元素在交叉軸方向的對齊格式 | Row容器使用VerticalAlign枚舉 |
Column容器使用HorizontalAlign枚舉 |
Column容器中使用FlexAlign的主軸對齊方式函數(shù)及其特點(diǎn)如下所示:
Row容器中使用FlexAlign的主軸對齊方式函數(shù)及其特點(diǎn)如下所示:?
兩者在交叉軸上的對齊方式如下所示:
Column容器:縱向布局,先從上往下,再從左往右。
Row容器:橫向布局,先從左往右,再從上往下。
以下給出使用Column和Row容器的例子:
@Entry
@Component
struct Index {
// 設(shè)置狀態(tài)變量
@State ImageWidth: number = 150
build() {
Column() {
Row(){
Image($r('app.media.icon'))
.width(this.ImageWidth)
.interpolation(ImageInterpolation.High)
}
.width('100%')
.height(400)
.justifyContent(FlexAlign.Center)
Row(){
Text($r('app.string.width_label'))
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor('#008c8c')
TextInput({text: this.ImageWidth.toString()})
.backgroundColor('#fff')
.width(200)
.type(InputType.Number) // 只能輸入數(shù)字類型
.onChange(value=>{
if (!value) {
this.ImageWidth = 0
}else {
this.ImageWidth = parseInt(value)
}
})
}
.width('100%')
.padding({left: 10, right: 10})
.justifyContent(FlexAlign.SpaceBetween)
Divider().width('91%')
Row(){
Button('縮小')
.width(80)
.fontSize(20)
.onClick(()=>{
if(this.ImageWidth >= 10){
this.ImageWidth -= 10
}
})
Button('放大')
.width(80)
.fontSize(20)
.onClick(() => {
if (this.ImageWidth <= 300) {
this.ImageWidth += 10
}
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceAround)
.margin({top: 30, bottom: 30})
Slider({
min: 100,
max: 300,
value: this.ImageWidth,
step: 10, // 步長
})
.width('90%')
.blockColor('#36D')
.trackThickness(5) // 滑動條的粗細(xì)
.showTips(true) // 顯示氣泡百分比
.onChange(value => {
this.ImageWidth = value
})
}
.width('100%')
.height('100%')
}
}
呈現(xiàn)的效果如下所示:
ForEach(循環(huán)控制)
ForEach循環(huán)遍歷數(shù)組,根據(jù)數(shù)組內(nèi)容渲染頁面組件,以下是其基本格式:
ForEach(
arr: Array, // 要遍歷的數(shù)據(jù)數(shù)組
(item: any, index?: number) => {
// 頁面組件生成函數(shù)
}
keyGenerator?: (item: any, index?: number): string => {
// 鍵生成函數(shù),為數(shù)組每一項(xiàng)生產(chǎn)一個唯一標(biāo)識,組件是否重新渲染的判斷標(biāo)準(zhǔn)
}
)
以下是通過ForEach生成頁面的組件的基本案例:
class Item {
name: string
image: ResourceStr
price: number
discount: number
constructor(name: string, image: ResourceStr, price: number, discount = 0) {
this.name = name
this.image = image
this.price = price
this.discount = discount
}
}
@Entry
@Component
struct Index {
// 商品數(shù)據(jù)
private items: Array<Item> = [
new Item('華為', $r('app.media.icon'), 6999, 500),
new Item('小米', $r('app.media.icon'), 7999),
new Item('蘋果', $r('app.media.icon'), 9999),
new Item('三星', $r('app.media.icon'), 3999),
new Item('oppo', $r('app.media.icon'), 1999),
]
build(){
Column({space: 4}){
Row(){
Text('商品列表')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.width('100%')
.margin({bottom: 20})
ForEach(
this.items,
(item: Item) => {
Row({space: 10}){
Image(item.image)
.width(100)
Column({space: 4}){
if (item.discount) {
Text(item.name)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Text('原價(jià):¥ '+ item.price)
.fontColor('#ccc')
.fontSize(14)
.decoration({type: TextDecorationType.LineThrough})
Text('折扣價(jià):¥ '+ (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)
}
}
.margin({left: 10})
.height('100%')
.alignItems(HorizontalAlign.Start)
}
.width('100%')
.height(120)
.borderRadius(20)
.backgroundColor('#EFEFEF')
.padding(20)
.margin({bottom: 10})
}
)
}
.width('100%')
.height('100%')
.padding(20)
}
}
呈現(xiàn)的結(jié)果如下所示:
List(列表容器)
List是一種復(fù)雜的容器,當(dāng)頁面內(nèi)容數(shù)量過多超出屏幕后,其列表項(xiàng)ListItem會自動提供滾動功能,當(dāng)然列表項(xiàng)既可以縱向排列也可以橫向排列,其基本格式代碼如下:
List({space: 10}){
ForEach([1, 2, 3, 4], item => {
ListItem(){
// 列表項(xiàng)內(nèi)容,只能包含一個根組件
Text('ListItem')
}
})
}
.width('100%')
.listDirection(Axis.Vertical) // 列表方向,默認(rèn)縱向(垂直)
在ForEarch外面我們嵌套一層List容器,在ForEach里面我們嵌套ListItem,來實(shí)現(xiàn)頁面的滾動:
最終呈現(xiàn)的效果如下:
ArkTS自定義組件
ArtTS提供了一些自定義組件及函數(shù)的方式,讓繁雜的代碼抽離出來,便于代碼的可維護(hù)性和可閱讀性,增強(qiáng)了代碼的健壯性,以下是ArkTS進(jìn)行自定義組件等相關(guān)的方法:
自定義組件:自定義組件很簡單,可以在一個ets中進(jìn)行書寫,將一部分代碼處理出來新設(shè)置一個 struct 構(gòu)造函數(shù)即可,也可以將代碼單獨(dú)抽離出來形成一個新的文件,如下將上面案例的頭部組件抽離出來形成一個新的組件Header,然后再在原本書寫頭部代碼的位置引用Header組件即可:
自定義函數(shù):自定義函數(shù)可以將煩長的代碼單獨(dú)抽離出一個函數(shù)當(dāng)中,然后在原位置調(diào)用我們設(shè)置的函數(shù)即可,自定義函數(shù)可以定義在全局或組件內(nèi),如下:
如果想設(shè)置組件內(nèi)自定義函數(shù),則需要設(shè)置與build()函數(shù)平級然后去掉function,然后引用函數(shù)的位置需要通過this指向即可:
@Styles裝飾器: 用來設(shè)置組件公共樣式,可以定義在全局或者組件內(nèi),和自定義函數(shù)的方式一致,如下:
文章來源:http://www.zghlxwxcb.cn/news/detail-774565.html
@Extend裝飾器:僅可定義在全局,用來設(shè)置組件的特有屬性,使用方式與上面一致:文章來源地址http://www.zghlxwxcb.cn/news/detail-774565.html
// 繼承模式,只能寫在全局
@Extend(Text) function priceText() {
.fontSize(18)
.fontColor('#F36')
}
到了這里,關(guān)于【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!