Tab组件,无法左对齐该怎么处理?

Tab组件,无法左对齐。

HarmonyOS
2024-09-30 10:09:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

Tab组件,无法左对齐,通过Scroll和Row组件用来实现一个页签,在onclick事件中通过修改索引值和Tabs组件的索引联动,实现切换效果,同时将Tabs的barHeight置为0。

@Entry  
@Component  
export default struct  SegmentTabView {  
  private controller: TabsController = new TabsController()  
  @State tabs: string[] = ['新能源',"选车"];  
  @State currentIndex: number = 0;  
  
  @Builder TabBuilder(tabName: string, index: number) {  
    Column() {  
      Text(tabName)  
        .fontColor(Color.Black)  
        .fontSize(this.currentIndex === index ? 19 : 16)  
        .fontWeight(this.currentIndex === index ? 800 : 400)  
        .margin({left: 10, right: 10})  
      Image($r('app.media.ic_normal'))  
        .margin({top: 5})  
        .width(17)  
        .height(5)  
        .visibility(this.currentIndex === index ? Visibility.Visible : Visibility.Hidden)  
    }  
    .justifyContent(FlexAlign.Center)  
    .onClick(() => {  
      this.currentIndex = index  
      this.controller.changeIndex(index)  
    })  
  }  
  
  build() {  
    Column() {  
      //自定义点击控件  
      Scroll() {  
        Row() {  
          ForEach(this.tabs, (tabName: string, index: number) => {  
            this.TabBuilder(tabName, index)  
          })  
        }.alignSelf(ItemAlign.Start)  
  
      }.align(Alignment.Start)  
      .scrollable(ScrollDirection.Horizontal)  
      .scrollBar(BarState.Off)  
      .width('100%')  
  
      // 设置tabs高度为0隐藏  
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {  
        ForEach(this.tabs, (item: number, index: number) => {  
          TabContent() {  
            Text('我是页面 ' + item + " 的内容")  
              .fontSize(30)  
          }  
        })  
      }.barHeight(0)  
  
    }.width('100%')  
  
  }  
}
分享
微博
QQ
微信
回复
2024-09-30 17:56:47
相关问题
HarmonyOS Tabs组件的Tabs如何对齐
251浏览 • 1回复 待解决
Grid组件显示异常怎么处理
238浏览 • 1回复 待解决
HarmonyOS 顶部tabs如何设置对齐
330浏览 • 1回复 待解决
HarmonyOS Tab组件无法响应onPageShow
303浏览 • 1回复 待解决
项目启动报错怎么处理啊?
239浏览 • 1回复 待解决
Text文本不垂直居中,怎么处理呢?
2591浏览 • 1回复 待解决
HarmonyOS 输入框无法对齐
284浏览 • 1回复 待解决
视频链接无法下载,怎么解决啊?
219浏览 • 1回复 待解决
JS中的input值文本对齐如何实现?
8296浏览 • 1回复 待解决
模拟器无法创建怎么办?
24浏览 • 1回复 待解决
模拟器无法启动怎么解决呢?
58浏览 • 1回复 待解决
webview导航无法正常导航,怎么处理
5865浏览 • 1回复 待解决
RelativeContainer组件auto对齐规则
272浏览 • 1回复 待解决
无法抓到im域名的包,怎么办?
296浏览 • 1回复 待解决
HarmonyOS 页面内组件全屏怎么处理
342浏览 • 1回复 待解决
HarmonyOS Navigation和Tab组件问题
708浏览 • 1回复 待解决
HarmonyOS tabs的tabBar怎么
407浏览 • 1回复 待解决
注册监听关机事件,如何处理
720浏览 • 1回复 待解决