????????從今天開始，博主將開設(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)的改變一個圖片的大小操作如下：

下面是輸入框的各種類型描述：

Button(按鈕組件)

Button(label?: ResourceStr)

1）文字型按鈕

Button('點(diǎn)我')

2）自定義按鈕，在Button內(nèi)嵌套其它組件

Button(){

??????? Image($r('app.media.search')).width(20).margin(10)

}

比如我們用按鈕動態(tài)的改變一個圖片的大小操作如下：

下面是按鈕的各種類型描述：

Slider(滑動條組件)

滑動條的組件的功能實(shí)現(xiàn)很簡單，只需要在Slider里面設(shè)置其功能，外部設(shè)置其樣式即可：

Column、Row(布局容器)

Column容器與Row容器其對應(yīng)的對齊方式使用的參數(shù)如下表格所示：

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ù)的方式一致，如下：

@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)！