HarmonyOS Tabs组件的Tabs如何左对齐?

Tabs如何左对齐。

要把tabs只显示在左半边,不需要撑满宽度,现在的写法:

Tabs({ barPosition: BarPosition.Start }) {  
  TabContent() {  
    Text('首页的内容').fontSize(30)  
  }  
  .tabBar($r('app.string.community_tabs_hot'))  
  
  TabContent() {  
    Text('推荐的内容').fontSize(30)  
  }  
  .tabBar($r('app.string.community_tabs_newest'))  
  
  TabContent() {  
    Text('发现的内容').fontSize(30)  
  }  
  .tabBar($r('app.string.community_tabs_guide'))  
}.width('100%').alignSelf(ItemAlign.Start).barWidth('40%')
HarmonyOS
2024-10-21 10:10:54
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可参考:

@Entry  
@Component  
struct Index {  
  @State message: string = 'HelloWorld';  
  private tabsController: TabsController = new TabsController()  
  @State currentIndex: number = 0;  
  
  @Builder  
  TabBarBuilder(title: string, targetIndex: number) {  
    Text(title).fontWeight(targetIndex === this.currentIndex ? FontWeight.Bold : FontWeight.Normal).margin({ left: 10, right: 10 })  
      .onClick(() => {  
        this.tabsController.changeIndex(targetIndex)  
      })  
  }  
  
  build() {  
    Row() {  
      Column() {  
        Flex({ direction: FlexDirection.Row }) {  
          this.TabBarBuilder('页签1', 0)  
          this.TabBarBuilder('页签2', 1)  
          this.TabBarBuilder('页签3', 2)  
        }  
  
        Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {  
          TabContent() {  
            Text("页签1页面")  
          }  
  
          TabContent() {  
            Text("页签2页面")  
          }  
  
          TabContent() {  
            Text("页签3页面")  
          }  
        }.onChange((index: number) => {  
          this.currentIndex = index;  
        })  
      }  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-21 15:56:48
相关问题
HarmonyOS 顶部tabs如何设置对齐
437浏览 • 1回复 待解决
HarmonyOS tabstabBar怎么居
543浏览 • 1回复 待解决
HarmonyOS Tabs bar 怎么设置对齐左边
1004浏览 • 1回复 待解决
Tabs如何才能居显示呢
1004浏览 • 1回复 待解决
HarmonyOS Tabs组件嵌套Tabs组件问题
818浏览 • 1回复 待解决
HarmonyOS Tabs组件切换
347浏览 • 1回复 待解决
HarmonyOS Tabs组件组件问题
437浏览 • 1回复 待解决
HarmonyOS Tabs组件宽度问题
32浏览 • 1回复 待解决
HarmonyOS Tabs组件嵌套滑动
402浏览 • 1回复 待解决
Tab组件,无法对齐该怎么处理?
425浏览 • 1回复 待解决
HarmonyOS 如何设定tabs组件tabbar样式
635浏览 • 1回复 待解决
HarmonyOS 关于Tabs组件TabContent问题
34浏览 • 1回复 待解决
HarmonyOS Tabs组件tabBar宽度问题
670浏览 • 1回复 待解决
Tabs组件嵌套滑动组件
1448浏览 • 1回复 待解决