《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-11 頁簽切換容器組件Tabs

頁簽切換容器組件TabsTabs概述Tabs是通過頁簽進(jìn)行內(nèi)容視圖切換的容器組件，每個(gè)頁簽對(duì)應(yīng)一個(gè)內(nèi)容視圖。它僅可包含子組件TabContent。每個(gè)TabContent對(duì)應(yīng)的頁簽圖標(biāo)和文字用屬性tabBar設(shè)置，Tabs的控制器和事件可以配合進(jìn)行頁簽的切換控制。如右圖所示。接口描述：Tabs(value?:{barPosition?:BarPosition,index?:number,controller?:

TabsController})Tabs參數(shù)

private

controller:

TabsController

=

new

TabsController();…

Tabs({

barPosition:

BarPosition.End,

//指定頁簽位置

index:0,

//index：指定初始頁簽索引，默認(rèn)值為

0

controller:

this.controller

//controller：設(shè)置Tabs控制器

})…其他代碼略Tabs通過參數(shù)來設(shè)置頁簽位置、初始頁簽索引和控制器。參數(shù)說明：參數(shù)名參數(shù)類型必填參數(shù)描述barPositionBarPosition否設(shè)置Tabs的頁簽位置。默認(rèn)值：BarPosition.Startindexnumber否設(shè)置初始頁簽索引。默認(rèn)值：0controllerTabsController否設(shè)置Tabs控制器。使用示例：Tabs的頁簽位置Tabs使用參數(shù)barPosition配合屬性vertical可指定頁簽出現(xiàn)的位置。Tabs子組件TabContentTabs的內(nèi)容視圖子組件TabContent，只在Tabs中使用，TabContent使用時(shí)不需要傳參數(shù)，它的tabBar屬性,用來設(shè)置tabBar顯示標(biāo)簽。TabContent內(nèi)只能由一個(gè)子組件。tabBar的參數(shù)類型：string|Resource|CustomBuilder|{icon?:string|Resource,text?:string|Resource}Tabs子組件TabContent使用示例：Tabs({

barPosition:

BarPosition.End}){

TabContent()

{

Column(){

Text('消息頁').fontSize(50)}

.width('100%').height('100%').backgroundColor("#ffd1e0ef")

}.size({width:

"100%",

height:

"100%"})

//

.tabBar("消息")

//直接使用文字

.tabBar({icon:$r("app.media.icon"),text:"消息"})//使用圖標(biāo)和文字…//其他TabContent略}Tabs的屬性Tabs除支持通用屬性外，還支持以下屬性。名稱參數(shù)類型描述verticalboolean設(shè)置為false是為橫向Tabs，設(shè)置為true時(shí)為縱向Tabs。默認(rèn)值：falsescrollableboolean設(shè)置為true時(shí)可以通過滑動(dòng)頁面進(jìn)行頁面切換，為false時(shí)不可滑動(dòng)切換頁面。默認(rèn)值：truebarModeBarModeTabBar布局模式，具體描述見BarMode枚舉說明。默認(rèn)值：BarMode.FixedbarWidthnumber|Length8+TabBar的寬度值。barHeightnumber|Length8+TabBar的高度值。animationDurationnumberTabContent滑動(dòng)動(dòng)畫時(shí)長。默認(rèn)值：200BarMode.Scrollable:每一個(gè)TabBar均使用實(shí)際布局寬度，超過總長度（橫向Tabs的barWidth，縱向Tabs的barHeight）后可滑動(dòng)。。BarMode.Fixed:所有TabBar平均分配barWidth寬度（縱向時(shí)平均分配barHeight高度）。Tabs的事件Tabs除支持通用事件外，還支持onChange事件。onChange(event:(index:number)=>void)：Tab頁簽切換后觸發(fā)的事件，可以在獲取箭頭函數(shù)的參數(shù)index。private

currentIndex: