当前无法设置左对齐,当前可参考如下代码实现@Entry @Component struct TabDemo5 { @State tabArray: Array<number> = [0, 1, 2 ] @State focusIndex: number = 0 @State pre: number = 0 @State index: number = 0 private controller: TabsController = new TabsController() @State test: boolean = false // 单独的页签 @Builder Tab(tabName: string, tabItem: number, tabIndex: number) { Column({ space: 20 }) { Text(tabName) .fontSize(22) .fontColor(tabIndex === this.focusIndex ? "#0000FF " : "#000000") .margin({top: '17%'}) } .width(85) .height(60) .onClick(() => { this.controller.changeIndex(tabIndex) this.focusIndex = tabIndex }) } build() { Column() { Column() { // 页签 Row({ space: 7 }) { Scroll() { Row() { ForEach(this.tabArray, (item: number, index: number) => { this.Tab("签页" + item, item, index) }) } } .align(Alignment.Start) .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off) .width('100%') .height('10%') .backgroundColor(Color.Pink) } .width('100%') .backgroundColor(Color.Pink) //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.Gray) }) } .barHeight(0) .animationDuration(100) .onChange((index: number) => { console.log('foo change') this.focusIndex = index }) } .alignItems(HorizontalAlign.Start) .width('100%') } .height('100%') } }
当前无法设置左对齐,当前可参考如下代码实现