HarmonyOS 鸿蒙Next Tabs 顶部导航栏字体较长时超出父容器,导致多个tab选中后不可见,如何实现在选中不同tab后,顶部导航栏能滑动到可见位置
HarmonyOS 鸿蒙Next Tabs 顶部导航栏字体较长时超出父容器,导致多个tab选中后不可见,如何实现在选中不同tab后,顶部导航栏能滑动到可见位置
麻烦在看下
在低版本手机滑动能正常显示,高版本复现了该问题,已将该问题反馈相关人员,请耐心等待。
1.barHeight(0) 隐藏默认tabBar的高度
2.删除。tabbar属性
3.定义一个list再tabs的控件上面。 设置scroller 当点击listitem的时候改变index 当滑动tab的onchange方法回调后也修改下index的值就可以了
地下tab滑动咋实现list也跟着滑动到可见为止 用scrolltoindex效果不好
大概是实现了 但是好生硬
找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:https://www.bilibili.com/video/BV1S4411E7LY/?p=17
但是使用横向的list的话,下面viewpager的手动左右滑动就没有了
已经实现,感谢感谢
当前我滑动显示pink,想让上面导航条也自动滑动到用户可见的地方
// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TabsExample {
[@State](/user/State) fontColor: string = '#182431'
[@State](/user/State) selectedFontColor: string = '#007DFF'
[@State](/user/State) currentIndex: number = 0
private controller: TabsController = new TabsController()
[@Builder](/user/Builder) TabBuilder(index: number, name: string) {
Row() {
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
.margin({ top: 17, bottom: 7 })
}
.padding({ left: 16, top: 6, right: 16, bottom: 6 })
.borderRadius(16)
.margin({ left: 12 });
}
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar(this.TabBuilder(0, 'reengreengreen'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}.tabBar(this.TabBuilder(1, 'blue'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#FFBF00')
}.tabBar(this.TabBuilder(2, 'yellow'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#E67C92')
}.tabBar(this.TabBuilder(3, 'pink'))
}
.vertical(false)
.barMode(BarMode.Scrollable)
.onChange((index: number) => {
this.currentIndex = index
})
.width(360)
.barHeight(60)
.animationDuration(100)
.scrollable(true)
.layoutWeight(1)
.vertical(false)
.height(296)
.margin({ top: 52 })
.backgroundColor('#F1F3F5')
}.width('100%')
}
}
针对HarmonyOS 鸿蒙Next Tabs 顶部导航栏字体较长时超出父容器,导致多个tab选中后不可见的问题,可以采取以下技术方案实现选中不同tab后,顶部导航栏能滑动到可见位置:
-
动态调整Tab布局:在Tab项文字较长时,考虑采用省略号显示或自动换行策略,以减少每个Tab项的宽度,从而避免超出父容器。
-
启用滚动视图:确保顶部导航栏的父容器具备滚动功能,可通过设置ScrollView或HorizontalScrollView组件来实现。这样,当用户选中某个不可见的Tab时,可以手动或通过编程方式滚动到该Tab的位置。
-
编程控制滚动:在Tab选中事件中,通过编程方式获取被选中Tab的位置,并调用ScrollView的
smoothScrollTo
或scrollTo
方法,将导航栏滚动到该Tab的位置,使其可见。 -
优化Tab布局算法:如果Tab数量较多,可以考虑优化Tab的布局算法,如采用分页显示、固定Tab数量加滑动切换等方式,以提高用户体验。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html