HarmonyOS 鸿蒙Next 垂直方向的 tas tabBar 如何向上对齐

【关键字】

垂直方向 / tabBar / tabs / 向上对齐

【问题描述】

垂直方向的 tabs tabBar 如何向上对齐？

当前效果如下图所示。

【解决方案】

目前tabbar只支持居中、均匀显示，可以使用自定义导航栏构建参考链接： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-tabs-V5#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%BC%E8%88%AA%E6%A0%8F

示例代码如下：

@Entry
@Component
struct Index {
build() {
Tabs({ barPosition: BarPosition.Start }) {
TabContent() {
Text(‘首页的内容’).fontSize(30)
}
.tabBar(‘首页’)
TabContent() {
Text(‘推荐的内容’).fontSize(30)
}
.tabBar(‘推荐’)
TabContent() {
Text(‘发现的内容’).fontSize(30)
}
.tabBar(‘发现’)
TabContent() {
Text(‘我的内容’).fontSize(30)
}
.tabBar(“我的”)
}
.vertical(true)
.barWidth(1000)
.barHeight(1000)
}
}