鸿蒙应用的Tabs 组件怎么使用
鸿蒙应用中的Tabs组件是一个用于通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。以下是Tabs组件的使用方法：
一、基本结构
Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏。Tabs组件使用花括号包裹TabContent，其中TabContent显示相应的内容页。
二、常用属性
- barPosition：用于设置导航栏的位置，可以是开头（BarPosition.Start）或结尾（BarPosition.End）。默认情况下，导航栏位于顶部（BarPosition.Start）。当vertical属性为true时，barPosition设置为start，则导航栏位于左侧；设置为end，则导航栏位于右侧。
- vertical：用于设置导航栏的方向，可以是水平（false）或垂直（true）。
- scrollable：控制是否允许滑动。当导航栏的内容过多，无法在一屏内显示完时，可以通过设置scrollable为true来允许滑动。
- animationDuration：设置切换动画的时间，单位为毫秒。
- barMode：设置导航栏的模式，可以是固定（BarMode.Fixed）或滚动（BarMode.Scrollable）。当标签页过多时，可通过barMode属性设置导航栏的滑动。
三、使用方法
- 基本用法
在鸿蒙应用的页面中，可以通过以下方式使用Tabs组件：
@Entry
@Component
struct TabsDemo {
build() {
Tabs() {
TabContent() {
Text('首页内容')
}.tabBar('首页')
TabContent() {
Text('推荐内容')
}.tabBar('推荐')
TabContent() {
Text('发现内容')
}.tabBar('发现')
TabContent() {
Text('我的内容')
}.tabBar('我的')
}
}
}
- 设置导航栏位置
可以通过barPosition属性设置导航栏的位置。例如，将导航栏设置在底部：
Tabs({barPosition: BarPosition.End}) {
// ...TabContent和tabBar的内容
}
- 滚动导航栏
当标签页过多，无法在一屏内显示完时，可以通过设置barMode为BarMode.Scrollable来实现滚动导航栏：
Tabs() {
ForEach(this.titles, (item: string, index: number) => {
TabContent() {
Text(`${item}内容`)
}.tabBar(`${item}`)
})
}.barMode(BarMode.Scrollable)
其中，this.titles是一个包含所有标签页标题的字符串数组。
- 自定义导航栏
TabBar在底部时，一般会显示图形和文字，甚至有特殊的图标。可以通过自定义构建函数来实现自定义导航栏：
@Builder
myBuildBar(index: number, title: string, img?: ResourceStr, selectImg?: ResourceStr) {
Column() {
Image(index == this.selectedIndex ? selectImg : img).width(30).fillColor(Color.Orange)
if (index === this.selectedIndex) {
Text(title).fontColor(Color.Orange)
} else {
Text(title)
}
}
}
@Entry
@Component
struct CustomTabsDemo {
@State selectedIndex: number = 0
build() {
Tabs({barPosition: BarPosition.End}) {
TabContent() {
Text('购物')
}.tabBar(this.myBuildBar(0, '购物', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))
TabContent() {
Text('我的')
}.tabBar(this.myBuildBar(1, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))
// ...其他TabContent和tabBar的内容
}.onChange((index: number) => {
this.selectedIndex = index
})
}
}
在上面的代码中，myBuildBar函数用于构建自定义的TabBar，其中selectedIndex用于存储当前选中的TabBar索引。通过onChange事件监听TabBar的切换，并更新selectedIndex的值，从而实现高亮切换效果。
- 嵌套使用Tabs
Tabs内可以嵌套多个Tabs，以实现更复杂的布局。例如，可以在一个Tabs组件中嵌套另一个Tabs组件：
@Entry
@Component
struct NestedTabsDemo {
title: string[] = ['直播', '推荐', '热门', '动画', '影视', '新征程', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']
build() {
Tabs({barPosition: BarPosition.End}) {
TabContent() {
Tabs() {
ForEach(this.title, (item: string, index: number) => {
TabContent() {
Text(`${item}内容`)
}.tabBar(`${item}`)
})
}.barMode(BarMode.Scrollable)
}.tabBar('首页')
// ...其他TabContent和tabBar的内容
}.scrollable(false).animationDuration(3000)
}
}
在上面的代码中，外层的Tabs组件包含一个TabBar和一个内容区域，内容区域中嵌套了另一个Tabs组件。内层的Tabs组件用于显示多个标签页的内容，并通过barMode属性设置为滚动模式。
四、注意事项
- TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
- TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
- 在自定义TabBar时，需要注意高亮切换效果的实现，可以通过监听onChange事件或onTabBarClick事件来更新选中状态。
通过以上方法，可以在鸿蒙应用中灵活地使用Tabs组件来实现标签页切换功能。
原文地址：https://blog.csdn.net/xuelian3015/article/details/142987980
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！