鸿蒙界面开发（12）：选项卡结构(Tabs)
选项卡结构(Tabs)当页面信息较多时，为了让用户能够聚焦于当前表现的内容，需要对页面内容举行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换。
根本结构
Tabs组件的页面构成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏。
https://i-blog.csdnimg.cn/direct/deb154905acc4b68bde6ccd3c30dd1e2.png
分析
TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
Tabs(){
TabContent() {
Text('首页的内容').fontSize(30)
}
.tabBar('首页')
...
TabContent() {
Text('...').fontSize(30)
}
.tabBar('...')
}
...
导航栏位置利用Tabs的barPosition参数举行设置。默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，需要将barPosition设置为BarPosition.End。
Tabs({ barPosition: BarPosition.End }) {
// TabContent的内容：首页、发现、推荐、我的
...
}
实现侧边导航栏需要将Tabs的vertical属性设置为true，vertical默认值为false，表明内容页和导航栏垂直方向分列。
Tabs({ barPosition: BarPosition.Start }) {
// TabContent的内容:首页、发现、推荐、我的
...
}
.vertical(true)
.barWidth(100)
.barHeight(200)
分析
vertical为false时，tabbar的宽度默认为撑满屏幕的宽度，需要设置barWidth为合适值。
vertical为true时，tabbar的高度默认为现实内容的高度，需要设置barHeight为合适值。
限制导航栏的滑动切换
默认情况下，导航栏都支持滑动切换，在一些内容信息量需要举行多级分类的页面，如支持底部导航+顶部导航组合的情况下，底部导航栏的滑动效果与顶部导航出现辩论，此时需要限制底部导航的滑动，制止引起欠好的用户体验。
控制手动滑动切换的属性为scrollable，默认值为true，表现可以滑动，若要限制滑动切换页签则需要设置为false。
Tabs({ barPosition: BarPosition.End }) {
// 其他TabContent内容：发现、推荐、我的
...
}
.scrollable(false)
滑动动画animationDuration
.animationDuration():点击滑动的动画时间，不想要动画，可以设为0
导航栏
固定导航栏——BarMode.Fixed
当内容分类较为固定且不具有拓展性时，例如底部导航内容分类一样平常固定，分类数量一样平常在3-5个，此时利用固定导航栏。固定导航栏不可滚动，无法被拖拽滚动，内容均分tabBar的宽度。
Tabs的barMode属性用于控制导航栏是否可以滚动，默认值为BarMode.Fixed。
Tabs({ barPosition: BarPosition.End }) {
// TabContent的内容：首页、发现、推荐、我的
...
}
.barMode(BarMode.Fixed) 滚动导航栏BarMode.Scrollable
滚动导航栏可以用于顶部导航栏大概侧边导航栏的设置，内容分类较多，屏幕宽度无法容纳所有分类页签的情况下，需要利用可滚动的导航栏，支持用户点击和滑动来加载隐蔽的页签内容。
滚动导航栏需要设置Tabs组件的barMode属性，BarMode.Scrollable表现可滚动导航栏。
Tabs({ barPosition: BarPosition.Start }) {
// TabContent的内容：关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事
...
}
.barMode(BarMode.Scrollable)
自定义导航栏
对于底部导航栏，一样平常作为应用主页面功能区分，为了更好的用户体验，会组合笔墨以及对应语义图标表现页签内容，这种情况下，需要自定义导航页签的样式。
设置自定义导航栏需要利用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。
例如这里声明tabBuilder的自定义函数组件，传入参数包括页签文字title，对应位置index，以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否，决定UI显示的样式。
//参数
@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)
}
在TabContent对应tabBar属性中传入自定义函数组件，并传递相应的参数。
TabContent() {。。。}
.tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
切换至指定页签
在不利用自定义导航栏时，默认的Tabs会实现切换逻辑。在利用了自定义导航栏后，默认的Tabs仅实现滑动内容页和点击页签时内容页的切换逻辑，页签切换逻辑需要自行实现。即用户滑动内容页和点击页签时，页签栏需要同步切换至内容页对应的页签。
此时需要利用Tabs提供的onChange事件方法，监听索引index的变化，并将当前活跃的index值通报给currentIndex，实现页签的切换。
@Entry
@Component
struct TabsExample1 {
@State currentIndex: number = 0
@Builder tabBuilder(title: string, targetIndex: number) {
Column() {
//判断是否为当前内容页，改变页签的颜色
Text(title) .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
}
}
build() {
Column() {
Tabs({ barPosition: BarPosition.End }) {
TabContent() {...}.tabBar(this.tabBuilder('首页', 0))
...
}.animationDuration(0).backgroundColor('#F1F3F5')
//onChange事件，监听滑动和点击的时候，都会触发
.onChange((index: number) => {
this.currentIndex = index
})
}.width('100%')
}
}
https://i-blog.csdnimg.cn/direct/196184c8234b4bc6a95ffa677f6d860c.png
2 除此之外，还可以将currentIndex传给Tabs的index参数，通过改变currentIndex来实现跳转至指定索引值对应的TabContent内容。
3 也可以利用TabsController，TabsController是Tabs组件的控制器，用于控制Tabs组件举行内容页切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。
@State currentIndex: number = 2
private controller: TabsController = new TabsController()
Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {...}.height(600)
.onChange((index: number) => {
this.currentIndex = index
})
Button('动态修改index').width('50%').margin({ top: 20 })
.onClick(()=>{
this.currentIndex = (this.currentIndex + 1) % 4
})
Button('changeIndex').width('50%').margin({ top: 20 })
.onClick(()=>{
let index = (this.currentIndex + 1) % 4
this.controller.changeIndex(index)
})
4 还可以通过Tabs组件的onContentWillChange接口，设置自定义拦截回调函数。拦截回调函数在下一个页面即将展示时被调用，假如回调返回true，新页面可以展示；假如回调返回false，新页面不会展示，仍表现原来页面。
Tabs({ barPosition: BarPosition.End, controller: this.controller, index: this.currentIndex }) {...}
.onContentWillChange((currentIndex, comingIndex) => {
if (comingIndex == 2) {
return false
}
return true
})
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]