国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用

這篇具有很好參考價(jià)值的文章主要介紹了【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

????????從今天開始,博主將開設(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)系,如下:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

學(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)如下:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

其中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')

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

打開?module.json5 文件夾下,配置如下 requestPermissions 選項(xiàng),可以看到圖片出現(xiàn)。

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

2)PixelMap格式,可以加載像素圖,常用在圖片編輯中

Image(pixelMapObject)

3)Resource格式,加載本地圖片,推薦使用

Image($r('app.media.mate'60.png)

Image($rawfile('mate60.png'))

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

Text(文本顯示組件)

Text(content?: string|Resource)

1)string格式,直接填寫文本內(nèi)容

Text('文本內(nèi)容')

2)Resource格式,讀取本地資源文件

Text($r('app.string.width_label'))

這里我們設(shè)置了一個動態(tài)的文本顯示:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

TextInput(文本輸入框)

TextInput( {placeholder?: ResourceStr, text?: ResourceStr} )

1)placeHolder:輸入框無輸入時(shí)的提示文本

TextInput({placeholder: '請輸入賬號或手機(jī)號'})

2)text:輸入框當(dāng)前的文本內(nèi)容

TextInput({text: '文本內(nèi)容'})

比如我們用輸入框動態(tài)的改變一個圖片的大小操作如下:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

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

名稱 描述
Normal 基本輸入模式。支持輸入數(shù)字、字母、下劃線、空格、特殊字符。
Password 密碼輸入模式。支持輸入數(shù)字、字母、下劃線、空格、特殊字符。
Email 郵箱地址輸入模式。支持?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)的改變一個圖片的大小操作如下:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

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

名稱 描述
Capsule 膠囊型按鈕(圓角默認(rèn)為高度的一半)。
Circle 圓形按鈕。
Normal 普通按鈕(默認(rèn)不帶圓角)。

Slider(滑動條組件)

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

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

Column、Row(布局容器)

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

屬性方法名 說明 參數(shù)
justifyContent 設(shè)置子元素在主軸方向的對齊格式 FlexAlign枚舉
alignItems 設(shè)置子元素在交叉軸方向的對齊格式 Row容器使用VerticalAlign枚舉
Column容器使用HorizontalAlign枚舉

Column容器中使用FlexAlign的主軸對齊方式函數(shù)及其特點(diǎn)如下所示:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

Row容器中使用FlexAlign的主軸對齊方式函數(shù)及其特點(diǎn)如下所示:?

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

兩者在交叉軸上的對齊方式如下所示:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

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)的效果如下所示:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

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é)果如下所示:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

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)頁面的滾動:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

最終呈現(xiàn)的效果如下:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

ArkTS自定義組件

ArtTS提供了一些自定義組件及函數(shù)的方式,讓繁雜的代碼抽離出來,便于代碼的可維護(hù)性和可閱讀性,增強(qiáng)了代碼的健壯性,以下是ArkTS進(jìn)行自定義組件等相關(guān)的方法:

自定義組件:自定義組件很簡單,可以在一個ets中進(jìn)行書寫,將一部分代碼處理出來新設(shè)置一個 struct 構(gòu)造函數(shù)即可,也可以將代碼單獨(dú)抽離出來形成一個新的文件,如下將上面案例的頭部組件抽離出來形成一個新的組件Header,然后再在原本書寫頭部代碼的位置引用Header組件即可:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

自定義函數(shù):自定義函數(shù)可以將煩長的代碼單獨(dú)抽離出一個函數(shù)當(dāng)中,然后在原位置調(diào)用我們設(shè)置的函數(shù)即可,自定義函數(shù)可以定義在全局或組件內(nèi),如下:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

如果想設(shè)置組件內(nèi)自定義函數(shù),則需要設(shè)置與build()函數(shù)平級然后去掉function,然后引用函數(shù)的位置需要通過this指向即可:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

@Styles裝飾器: 用來設(shè)置組件公共樣式,可以定義在全局或者組件內(nèi),和自定義函數(shù)的方式一致,如下:

【HarmonyOS】ArkTS語言介紹與組件方式運(yùn)用,HarmonyOS(鴻蒙開發(fā)),harmonyos,開發(fā)語言,華為

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

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包