HarmonyOS 鸿蒙Next 实现Tabs组件的左侧tabBar靠上对齐

实现Tabs组件的左侧tabBar靠上对齐

目前原生的tabbar暂时无法实现，只有通过自定义的方式去实现，可参考以下实现方式:

import { TabContentComp } from './component/TabContentComp'
@Entry({routeName: ‘ConsultAdvise’})
@Component
export struct ConsultAdvise {
  @State currentIndex: number = 0
  private tabsController : TabsController = new TabsController()
  @Builder tabBarBuilder(title: string, targetIndex: number){
    Column() {
      Image($r(“app.media.startIcon”)).width(30).height(30)
      Text(title).fontWeight(targetIndex === this.currentIndex? FontWeight.Bold:FontWeight.Normal)
    }
    .margin({left:10, right:10})
    .onClick(() => {
      this.tabsController.changeIndex(targetIndex)
    })
  }
  build() {
    Row() {
      Flex({ direction: FlexDirection.Column }) {
        this.tabBarBuilder(‘热点事件’, 0)
        this.tabBarBuilder(‘推荐视频’, 1)
        this.tabBarBuilder(‘社会生活’, 2)
      }
      /****************  功能展示  ********************/
      Tabs({barPosition: BarPosition.Start, controller: this.tabsController}){
        TabContent(){TabContentComp()}
        TabContent(){TabContentComp()}
        TabContent(){TabContentComp()}
      }.vertical(true).barHeight(‘100%’).barBackgroundColor(Color.Black)
      .barWidth(0).scrollable(true).barMode(BarMode.Scrollable)
      .onChange((index:number) => {
        this.currentIndex = index;
      })
    }.backgroundColor(’#eee’)
    .width(‘100%’).height(‘100%’)
  }
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next 实现Tabs组件的左侧tabBar靠上对齐的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 2楼•18 天前

在HarmonyOS鸿蒙Next中，实现Tabs组件的左侧tabBar靠上对齐，可以通过设置Tabs组件及其子组件的相关属性来完成。以下是具体的实现步骤：

设置Tabs组件的布局属性：
- 使用ohos:alignment="top"或ohos:vertical_alignment="top"（取决于你的具体布局容器），确保Tabs组件本身在布局容器内靠上对齐。
调整TabBar的布局参数：
- 在Tabs组件的TabBar中，确保ohos:gravity="top|start"，这样TabBar的内容（即各个Tab项）会在TabBar的左上角对齐。
Tab项的布局调整：
- 检查每个Tab项的布局，确保它们没有额外的margin或padding导致下移。
- 可以通过设置ohos:padding_top="0px"和ohos:margin_top="0px"来确保Tab项顶部没有额外空间。
整体布局检查：
- 确保外层布局（如DirectionalLayout或DependentLayout）没有影响到Tabs组件的对齐。
- 使用布局预览工具查看实时效果，微调参数以达到预期效果。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。