女人自慰AV免费观看内涵网,日韩国产剧情在线观看网址,神马电影网特片网,最新一级电影欧美,在线观看亚洲欧美日韩,黄色视频在线播放免费观看,ABO涨奶期羡澄,第一导航fulione,美女主播操b

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙ArkUI開發-Tabs組件的使用

jf_46214456 ? 來源: jf_46214456 ? 作者: jf_46214456 ? 2024-01-19 16:01 ? 次閱讀

在我們常用的應用中,經常會有視圖內容切換的場景,來展示更加豐富的內容。比如下面這個頁面,點擊底部的頁簽的選項,可以實現“首頁”和“我的” 兩個內容視圖的切換。

ArkUI開發框架提供了一種頁簽容器組件Tabs,開發者通過Tabs組件可以很容易的實現內容視圖的切換。頁簽容器Tabs的形式多種多樣,不同的頁面設計頁簽不一樣,可以把頁簽設置在底部、頂部或者側邊。

本文將詳細介紹Tabs組件的使用。

Tabs組件的簡單使用

Tabs組件僅可包含子組件TabContent,每一個頁簽對應一個內容視圖即TabContent組件。下面的示例代碼構建了一個簡單的頁簽頁面:

@Entry
@Component
struct TabsExample {
 private controller: TabsController = new TabsController()
 
 build() {
 Column() {
 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }
        .tabBar('green')
 
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }
        .tabBar('blue')
 
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }
        .tabBar('yellow')
 
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }
        .tabBar('pink')
      }
      .barWidth('100%') // 設置TabBar寬度
      .barHeight(60) // 設置TabBar高度
      .width('100%') // 設置Tabs組件寬度
      .height('100%') // 設置Tabs組件高度
      .backgroundColor(0xF5F5F5) // 設置Tabs組件背景顏色
    }
    .width('100%')
    .height('100%')
  }
}

效果圖如下:

上面示例代碼中,Tabs組件中包含4個子組件TabContent,通過TabContent的tabBar屬性設置TabBar的顯示內容。使用通用屬性width和height設置了Tabs組件的寬高,使用barWidth和barHeight設置了TabBar的寬度和高度。

說明

  • TabContent組件不支持設置通用寬度屬性,其寬度默認撐滿Tabs父組件。
  • TabContent組件不支持設置通用高度屬性,其高度由Tabs父組件高度與TabBar組件高度決定。

設置TabBar布局模式

因為Tabs的布局模式默認是Fixed的,所以Tabs的頁簽是不可滑動的。當頁簽比較多的時候,可能會導致頁簽顯示不全,將布局模式設置為Scrollable的話,可以實現頁簽的滾動。 Tabs的布局模式有Fixed(默認)和Scrollable兩種:

  • BarMode.Fixed:所有TabBar平均分配barWidth寬度(縱向時平均分配barHeight高度),頁簽不可滾動,效果圖如下:

  • BarMode.Scrollable:每一個TabBar均使用實際布局寬度,超過總長度(橫向Tabs的barWidth,縱向Tabs的barHeight)后可滑動。

  • 當頁簽比較多的時候,可以滑動頁簽,下面的示例代碼將barMode設置為BarMode.Scrollable,實現了可滾動的頁簽:
@Entry
@Component
struct TabsExample {
 private controller: TabsController = new TabsController()
 
 build() {
 Column() {
 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
 TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor(Color.Green)
        }
        .tabBar('green')
 
 TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor(Color.Blue)
        }
        .tabBar('blue')
 
        ...
 
      }
      .barMode(BarMode.Scrollable)
      .barWidth('100%')
      .barHeight(60)
      .width('100%')
      .height('100%')
    }
  }
}

設置TabBar位置和排列方向 Tabs組件頁簽默認顯示在頂部,某些場景下您可能希望Tabs頁簽出現在底部或者側邊,您可以使用Tabs組件接口中的參數barPosition設置頁簽位置。此外頁簽顯示位置還與vertical屬性相關聯,vertical屬性用于設置頁簽的排列方向,當vertical的屬性值為false(默認值)時頁簽橫向排列,為true時頁簽縱向排列。 barPosition的值可以設置為BarPosition.Start(默認值)和BarPosition.End:

  • BarPosition.Startvertical屬性方法設置為false(默認值)時,頁簽位于容器頂部。
Tabs({ barPosition: BarPosition.Start }) {
  ...
}
.vertical(false) 
.barWidth('100%') 
.barHeight(60)

效果圖如下:

vertical屬性方法設置為true時,頁簽位于容器左側。

Tabs({ barPosition: BarPosition.Start }) {
  ...
}
.vertical(true) 
.barWidth(100) 
.barHeight(200)

效果圖如下:

  • BarPosition.Endvertical屬性方法設置為false時,頁簽位于容器底部。
Tabs({ barPosition: BarPosition.End }) {
  ...
}
.vertical(false) 
.barWidth('100%') 
.barHeight(60)

效果圖如下:

vertical屬性方法設置為true時,頁簽位于容器右側。

Tabs({ barPosition: BarPosition.End}) {
  ...
}
.vertical(true) 
.barWidth(100) 
.barHeight(200)

效果圖如下:

自定義TabBar樣式

TabBar的默認顯示效果如下所示:

往往開發過程中,UX給我們的設計效果可能并不是這樣的,比如下面的這種底部頁簽效果:

TabContent的tabBar屬性除了支持string類型,還支持使用@Builder裝飾器修飾的函數。您可以使用@Builder裝飾器,構造一個生成自定義TabBar樣式的函數,實現上面的底部頁簽效果,示例代碼如下:

@Entry
@Component
struct TabsExample {
 @State currentIndex: number = 0;
 private tabsController: TabsController = new TabsController();
 
 @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
 Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() = > {
 this.currentIndex = targetIndex;
 this.tabsController.changeIndex(this.currentIndex);
    })
  }
 
 build() {
 Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
 TabContent() {
        Column().width('100%').height('100%').backgroundColor('#00CB87')
      }
      .tabBar(this.TabBuilder('首頁', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))
 
 TabContent() {
        Column().width('100%').height('100%').backgroundColor('#007DFF')
      }
      .tabBar(this.TabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
    }
    .barWidth('100%')
    .barHeight(50)
    .onChange((index: number) = > {
 this.currentIndex = index;
    })
  }
}

示例代碼中將barPosition的值設置為BarPosition.End,使頁簽顯示在底部。使用@Builder修飾TabBuilder函數,生成由Image和Text組成的頁簽。同時也給Tabs組件設置了TabsController控制器,當點擊某個頁簽時,調用changeIndex方法進行頁簽內容切換。 最后還需要給Tabs添加onChange事件,Tab頁簽切換后觸發該事件,這樣當我們左右滑動內容視圖的時候,頁簽樣式也會跟著改變。

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 鴻蒙
    +關注

    關注

    59

    文章

    2531

    瀏覽量

    43788
  • OpenHarmony
    +關注

    關注

    27

    文章

    3835

    瀏覽量

    18174
收藏 人收藏

    評論

    相關推薦
    熱點推薦

    HarmonyOS實戰:組件化項目搭建

    前言 鴻蒙應用開發已經成為互聯網新的風口,開發鴻蒙軟件已經成為今年工作的核心目標。在軟件開發過程中,對于復雜度較大,功能較多的軟件都會采用
    的頭像 發表于 06-09 14:58 ?33次閱讀
    HarmonyOS實戰:<b class='flag-5'>組件</b>化項目搭建

    Kuikly鴻蒙版正式開源 —— 揭秘卓越性能適配之旅

    ArkUI 來編寫的,UI組件由數據和UI描述組成,UI更新只能通過修改其綁定的數據來實現。渲染層怎樣驅動聲明式的ArkUI成為了鴻蒙版適配的第一個問題。 初步解決方案:統一Bui
    發表于 06-04 16:46

    2025開源鴻蒙開發者大會圓滿落幕

    近日,開源鴻蒙開發者大會2025(OHDC.2025,簡稱“大會”)在深圳隆重開幕。大會正式發布了開源鴻蒙5.1 Release版本,舉行了開源鴻蒙應用技術
    的頭像 發表于 05-26 17:03 ?340次閱讀

    DialogHub上線OpenHarmony開源社區,高效開發鴻蒙應用彈窗

    作為鴻蒙應用開發者,在使用ArkUI現有能力進行彈窗開發時,總會遇到一些讓人糾結的交互問題:應用內進行消息提示時,既要求消息內容支持圖文混排,又要求彈窗本身不能打斷用戶交互(頁面滑動、
    發表于 04-03 17:30

    開源啦!!!基于鴻蒙ArkTS封裝的圖表組件《McCharts》,大家快來一起共創

    的地方請大家高抬貴手,寬容一下,謝謝。 這次主要是給大家帶來一個重磅消息,就是我自己使用鴻蒙ArkTS語法開發的圖表組件今日正式開源了。為什么?原因有兩點吧! 鴻蒙是國產的操作系統,
    發表于 03-15 15:21

    Get這個秘籍,鴻蒙原生應用頁面滑動絲滑無比

    鴻蒙應用開發中,部分應用頁面在滑動時會出現白塊或白屏的問題,不僅困擾開發者,還直接影響用戶體驗。針對這一痛點,華為近期分別推出了針對鴻蒙原生應用A
    發表于 03-06 14:41

    華為推出RN/H5多設備自適應組件

    在原生鴻蒙應用開發中,華為針對ArkUI框架推出了一整套針對多設備適配的完善能力(如“一多”能力)以及高階組件(如分欄、邊看邊評等),幫助開發
    的頭像 發表于 01-16 14:46 ?628次閱讀

    鴻蒙原生開發手記:01-元服務開發

    簡介 元服務是鴻蒙中的一種輕量應用形態,無需下載,直接運行。類似于微信小程序,但與小程序不同的是,元服務更加輕量。 元服務使用原生開發,是系統級提供的,無論從易用性、性能、體驗上,都要比小程序好
    發表于 11-14 17:28

    Taro 鴻蒙技術內幕系列(二):如何讓 W3C 標準的 CSS跑在鴻蒙

    作者:京東零售 馬銀濤 ? 基于 Taro 打造的京東鴻蒙 APP 已跟隨鴻蒙 Next 系統公測,本系列文章將深入解析 Taro 如何實現使用 React 開發高性能鴻蒙應用的技術內
    的頭像 發表于 10-31 10:54 ?449次閱讀
    Taro <b class='flag-5'>鴻蒙</b>技術內幕系列(二):如何讓 W3C 標準的 CSS跑在<b class='flag-5'>鴻蒙</b>上

    Taro鴻蒙技術內幕系列(一):如何將React代碼跑在ArkUI

    基于 Taro 打造的京東鴻蒙 APP 已跟隨鴻蒙 Next 系統公測,本系列文章將深入解析 Taro 如何實現使用 React 開發高性能鴻蒙應用的技術內幕。
    的頭像 發表于 10-25 17:24 ?661次閱讀
    Taro<b class='flag-5'>鴻蒙</b>技術內幕系列(一):如何將React代碼跑在<b class='flag-5'>ArkUI</b>上

    鴻蒙Flutter實戰:07混合開發

    # 鴻蒙Flutter實戰:混合開發 鴻蒙Flutter混合開發主要有兩種形式。 ## 1.基于har 將flutter module打包成har包,在原生
    發表于 10-23 16:00

    鴻蒙ArkTS容器組件:TabContent

    僅在Tabs中使用,對應一個切換頁簽的內容視圖。
    的頭像 發表于 07-15 15:04 ?1294次閱讀
    <b class='flag-5'>鴻蒙</b>ArkTS容器<b class='flag-5'>組件</b>:TabContent

    鴻蒙ArkTS容器組件Tabs

    通過頁簽進行內容視圖切換的容器組件,每個頁簽對應一個內容視圖。
    的頭像 發表于 07-15 09:48 ?1521次閱讀
    <b class='flag-5'>鴻蒙</b>ArkTS容器<b class='flag-5'>組件</b>:<b class='flag-5'>Tabs</b>

    鴻蒙開發:【頁面棧及任務鏈】

    單個UIAbility組件可以實現多個頁面,并在多個頁面之間跳轉,這種UIAbility組件內部的頁面跳轉關系稱為“頁面棧”,由ArkUI框架統一管理,如下圖中的UIAbility1
    的頭像 發表于 06-14 10:10 ?707次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>開發</b>:【頁面棧及任務鏈】

    鴻蒙ArkTS聲明式開發:跨平臺支持列表【觸摸測試控制】觸摸交互控制

    設置組件的觸摸測試類型。ArkUI開發框架在處理觸屏事件時,會在觸屏事件觸發前,進行按壓點和組件區域的觸摸測試來收集需要響應觸屏事件的組件
    的頭像 發表于 06-11 22:12 ?752次閱讀