HarmonyOS 鸿蒙Next tabs上的tab能不能居左展示

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next tabs上的tab能不能居左展示

tab标题能否居左展示,两个tab间隔为20,麻烦给出具体代码

4 回复

系统提供的Tabs暂不支持居左显示.

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-205-V5

可自定义Tab,代码参考如下:

[@Entry](/user/Entry) 
[@Component](/user/Component) 
struct Index { 
 [@State](/user/State) tabArray: Array<number> = [0, 1] 
 [@State](/user/State) focusIndex: number = 0 
 [@State](/user/State) pre: number = 0 
 [@State](/user/State) index: number = 0 
 private controller: TabsController = new TabsController() 
 [@State](/user/State) test: boolean = false 
 // 单独的页签 
 [@Builder](/user/Builder) 
 Tab(tabName: string, tabItem: number, tabIndex: number) { 
   Column({ space: 20 }) { 
     Text(tabName).fontSize(18) 
     Image($r('app.media.icon')).width(20).height(20) 
   } 
   .width(100) 
   .height(60) 
   .borderRadius({ topLeft: 10, topRight: 10 }) 
   .onClick(() => { 
     this.controller.changeIndex(tabIndex) 
     this.focusIndex = tabIndex 
   }) 
   .backgroundColor(tabIndex === this.focusIndex ? "#ffffffff" : "#ffb7b7b7") 
 } 

 build() { 
   Column() { 
     Column() { 
       // 页签 
       Row({ space: 7 }) { 
         Scroll() { 
           Row() { 
             ForEach(this.tabArray, (item: number, index: number) => { 
               this.Tab("页" + item, item, index) 
             }) 
           } 
           .justifyContent(FlexAlign.Start) 
         } 
         .align(Alignment.Start) 
         .scrollable(ScrollDirection.Horizontal) 
         .scrollBar(BarState.Off) 
         .width('80%') 
         .backgroundColor("#ffb7b7b7") 

       } 
       .width('100%') 
       .backgroundColor("#ffb7b7b7") 

       //tabs 
       Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 
         ForEach(this.tabArray, (item: number, index: number) => { 
           TabContent() { 
             Text('我是页面 ' + item + " 的内容") 
               .height(300) 
               .width('100%') 
               .fontSize(30) 
           } 

           .backgroundColor(Color.Blue) 
         }) 
       } 

       .barHeight(0) 
       .animationDuration(100) 
       .onChange((index: number) => { 
         console.log('foo change') 
         this.focusIndex = index 
       }) 
     } 
     .alignItems(HorizontalAlign.Start) 
     .width('100%') 
   } 
   .height('100%') 
 } 
}

[@Builder](/user/Builder) a(){

 Column(){

Blank()

Text('标题')

}

}

可以的,封装[@Builder](/user/Builder)装饰器,tabBar 就用你的[@Builder](/user/Builder)装饰器

HarmonyOS 鸿蒙Next tabs上的tab能居左展示

在HarmonyOS鸿蒙Next中,Tabs组件的导航栏位置是可以通过设置进行调整的。默认情况下,导航栏(TabBar)位于顶部居中位置,但你可以通过修改Tabs组件的barPosition属性来实现tab居左展示的效果。

具体实现方式如下:

  1. 创建Tabs组件并设置样式。
  2. 使用barPosition: BarPosition.Start参数将导航栏设置到左侧(同时也是顶部,因为Start通常指顶部或左侧起始位置,在Tabs组件中默认为水平布局时的顶部)。在鸿蒙系统中,即使设置为Start,由于用户的视觉习惯和界面布局规范,它通常也会表现为顶部导航,但tab项会在顶部左侧开始排列。
  3. 如果需要进一步的自定义,比如调整tab项的间距、字体大小等,可以通过设置TabStyle来实现。

请按照上述步骤进行操作,即可实现HarmonyOS鸿蒙Next tabs上的tab居左展示。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部