网站制作哪家做的好,全国信息企业查询平台,福建省住房和城乡建设厅官方网站,天津建设工程Tabs组件的使用
ArkUI开发框架提供了一种页签容器组件Tabs#xff0c;开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样#xff0c;不同的页面设计页签不一样#xff0c;可以把页签设置在底部、顶部或者侧边。 Tabs组件的简单使用
Tabs组件…Tabs组件的使用
ArkUI开发框架提供了一种页签容器组件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的宽度和高度。 设置TabBar布局模式 因为Tabs的布局模式默认是Fixed的所以Tabs的页签是不可滑动的。当页签比较多的时候可能会导致页签显示不全将布局模式设置为Scrollable的话可以实现页签的滚动。
Tabs的布局模式有Fixed默认和Scrollable两种 当页签比较多的时候可以滑动页签下面的示例代码将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.Start vertical属性方法设置为false默认值时页签位于容器顶部。
Tabs({ barPosition: BarPosition.Start }) {...
}
.vertical(false)
.barWidth(100%)
.barHeight(60) 效果图如下 vertical属性方法设置为true时页签位于容器左侧。
Tabs({ barPosition: BarPosition.Start }) {...
}
.vertical(true)
.barWidth(100)
.barHeight(200) 效果图如下 BarPosition.End vertical属性方法设置为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页签切换后触发该事件这样当我们左右滑动内容视图的时候页签样式也会跟着改变。
