【HarmonyOS NEXT】垂直方向的 tas tabBar 如何向上对齐

Mayism123

于 2024-07-25 14:54:13 发布

阅读量278

点赞数 1

文章标签： harmonyos

本文链接：https://blog.csdn.net/Mayism123/article/details/140690207

版权

【关键字】

垂直方向 / 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)
  }
}