鴻蒙開(kāi)發(fā)實(shí)戰(zhàn)-運(yùn)動(dòng)app開(kāi)發(fā)

主要開(kāi)發(fā)內(nèi)容

開(kāi)發(fā)準(zhǔn)備

想要實(shí)現(xiàn)以下功能的話，需要學(xué)習(xí)“Tabs”，“TabContent”，“Row”，“Column”，等等相關(guān)技術(shù)。

主頁(yè)

靜坐頁(yè)面
除此之外，還需要先準(zhǔn)備8張圖標(biāo)的圖片以及應(yīng)用開(kāi)發(fā)所需要的圖片。

tabs功能實(shí)現(xiàn)

應(yīng)用中的Tabs功能通過(guò)采用了TabsController來(lái)實(shí)現(xiàn)。TabsController是一個(gè)在鴻蒙開(kāi)發(fā)框架中用于管理Tabs的控制器，它負(fù)責(zé)處理Tabs之間的切換邏輯。以下是實(shí)現(xiàn)Tabs功能的關(guān)鍵代碼部分：

// 定義TabsController實(shí)例
private controller: TabsController = new TabsController()
// ...
// 在build方法中使用Tabs組件，并傳入controller
build() {
  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
    Tabs({ controller: this.controller }) {
      // ...（省略Tabs中的內(nèi)容）
    }
  }
}

在上述代碼中，通過(guò)創(chuàng)建一個(gè)TabsController實(shí)例并賦值給controller成員變量，將該控制器傳遞給Tabs組件。Tabs組件會(huì)根據(jù)傳入的控制器進(jìn)行管理，從而實(shí)現(xiàn)Tabs之間的切換。

關(guān)于TabsController的具體使用，我們可以看到定義了多個(gè)方法，如IndexClick、messageClick、myClick和meClick等。這些方法分別用于處理不同Tabs的點(diǎn)擊事件，并在點(diǎn)擊時(shí)調(diào)用controller.changeIndex(index)來(lái)切換到對(duì)應(yīng)的Tabs。通過(guò)TabsController的管理和控制，實(shí)現(xiàn)了在MyNewsIndex應(yīng)用中不同Tabs之間的切換效果。用戶點(diǎn)擊不同的Tabs時(shí)，調(diào)用相應(yīng)的方法切換到對(duì)應(yīng)的內(nèi)容，從而提供了用戶友好的導(dǎo)航和瀏覽體驗(yàn)。Tabs功能的實(shí)現(xiàn)使得用戶可以方便地切換到不同的運(yùn)動(dòng)分類或內(nèi)容頁(yè)面，增強(qiáng)了應(yīng)用的可用性。

@Entry
@Component
struct MyNewsIndex {
  private controller: TabsController = new TabsController()
  @State SelectPos:number=0;
  public IndexClick(){
    this.SelectPos=0;
    this.controller.changeIndex(0)
  }
  public messageClick(){
    this.SelectPos=1;
    this.controller.changeIndex(1)
  }
  public myClick(){
    this.SelectPos=2;
    this.controller.changeIndex(2)
  }
  public meClick(){
    this.SelectPos=3;
    this.controller.changeIndex(3)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Column() {
            zhu()
          }

        }
        .tabBar()
        TabContent() {
          Column() {
            jingzuo()
          }

        }
        .tabBar()
        TabContent() {
          Text("我men的")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(0X6495ED)
        }
        .tabBar()
        TabContent() {
          Text("我")
            .width('100%').height('100%')
            .fontSize(50)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .backgroundColor(Color.Black)

        }
        .tabBar()
      }
      .scrollable(false)
      .barHeight(0)
      .animationDuration(0)

底部導(dǎo)航欄

通過(guò)Row和Column以及Text，Image等組件，實(shí)現(xiàn)了底部的導(dǎo)航欄。四個(gè)不同的圖標(biāo)分別代表主頁(yè)、消息、我的、我，通過(guò)點(diǎn)擊不同圖標(biāo)，用戶可以快速切換到對(duì)應(yīng)的頁(yè)面，提升用戶友好性。以下是參考代碼：

Row() {
        Column(){
          Image((this.SelectPos==0?$r('app.media.yundong1'):$r('app.media.yundong')))
            .width(30)
            .height(30)
            .margin(12)

        }
        .layoutWeight(1)

        .height("100%")
        .onClick(this.IndexClick.bind(this))

        Column(){
          Image((this.SelectPos==1?$r('app.media.gangling1'):$r("app.media.gangling")))
            .width(35)
            .height(30)
            .margin(12)

        }
        .layoutWeight(1)

        .height("100%")
        .onClick(this.messageClick.bind(this))

        Column(){
          Image((this.SelectPos==2?$r('app.media.zhidao1'):$r('app.media.zhidao')))
            .width(30)
            .height(30)
            .margin(12)

        }
        .layoutWeight(1)

        .height("100%")
        .onClick(this.myClick.bind(this))

        Column(){
          Image((this.SelectPos==3?$r('app.media.me1'):$r('app.media.me')))
            .width(30)
            .height(30)
            .margin(12)
        }
        .layoutWeight(1)

        .height("100%")
        .onClick(this.meClick.bind(this))
      }
      .alignItems(VerticalAlign.Bottom)
      .width('100%')
      .height(50)
      .margin({top:0,right:0,bottom:10,left:0})
    }
    .width('100%')
    .height('100%')
  }
}

總結(jié)

本項(xiàng)目使用鴻蒙框架的代碼結(jié)構(gòu)清晰且容易理解。通過(guò)引入頁(yè)面組件（zhu和jingzuo）以及使用裝飾器（@Entry和@Component）來(lái)定義組件，代碼使得組件的結(jié)構(gòu)和布局一目了然，用戶可以輕松切換到不同的運(yùn)動(dòng)分類，包括主頁(yè)、精選等，還提供了用戶友好的界面導(dǎo)航，使用戶能夠快速找到符合個(gè)人興趣的運(yùn)動(dòng)內(nèi)容，除此之外，本項(xiàng)目通過(guò)鴻蒙采用了靈活的Flex布局，確保在不同設(shè)備上都能夠?qū)崿F(xiàn)良好的自適應(yīng)效果。

其次，鴻蒙框架提供了一系列的布局和樣式管理工具，如Flex、Column、Tabs等，使得頁(yè)面的布局和樣式定義更加方便。這種靈活性使得開(kāi)發(fā)者可以更容易地創(chuàng)建各種復(fù)雜的頁(yè)面布局，同時(shí)保持代碼的簡(jiǎn)潔性。

審核編輯 黃宇