HarmonyOS鸿蒙Next中Tabs居左实现方案

HarmonyOS鸿蒙Next中Tabs居左实现方案 是否能提供一个Tabs居左的demo

4 回复

@Component export struct TabsDemo { @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) { Row({ space: 20 }) { Text(tabName).fontSize(18) .fontColor(tabItem===this.focusIndex?Color.Red:Color.Black) } .justifyContent(FlexAlign.Center) .constraintSize({ minWidth: 35 }) .width(80) .height(60) .borderRadius({ topLeft: 10, topRight: 10 }) .onClick(() => { this.controller.changeIndex(tabIndex) this.focusIndex = tabIndex }) } build() { Column() { Column() { // 页签 Row({ space: 1 }) { 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(‘90%’) } .alignItems(VerticalAlign.Bottom) .width(‘100%’) } .alignItems(HorizontalAlign.Start) .width(‘100%’) //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.Pink) }) } .width(‘100%’) .barHeight(0) .animationDuration(100) .onChange((index: number) => { console.log(‘foo change’) this.focusIndex = index}) } .height(‘100%’) }

更多关于HarmonyOS鸿蒙Next中Tabs居左实现方案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


侧边tabs就是个属性设置，开发文档搜tabs也是有的

在HarmonyOS鸿蒙Next中，Tabs组件默认是居中显示的，若需实现Tabs居左，可以通过自定义布局样式来实现。具体步骤如下：

  1. 使用Column和Row布局：将Tabs组件放置在Row布局中，并通过设置Row的justifyContent属性为FlexAlign.Start，使Tabs居左。

  2. 自定义Tabs样式：通过TabsController控制Tabs的样式，设置indicator的width和marginLeft属性，调整指示器的位置。

  3. 调整Tabs宽度：通过设置Tabs的width属性，确保Tabs的宽度适合布局。

示例代码：

@Entry
@Component
struct TabsLeftAlign {
  private controller: TabsController = new TabsController();

  build() {
    Column() {
      Row({ justifyContent: FlexAlign.Start }) {
        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
          TabContent() {
            Text('Tab1')
          }
          TabContent() {
            Text('Tab2')
          }
        }
        .width('100%')
      }
      .width('100%')
    }
  }
}

通过上述方法，可实现Tabs在HarmonyOS鸿蒙Next中居左显示。

在HarmonyOS鸿蒙Next中，要实现Tabs组件居左，可以通过自定义布局样式来实现。具体步骤如下：

  1. 使用Column容器：将Tabs组件放置在Column容器中，并设置Column的alignItems属性为HorizontalAlign.Start，使内容居左。

  2. 自定义Tabs样式：通过Tabs组件的style属性，设置宽度等样式，确保Tabs内容不会占据整个屏幕宽度。

示例代码：

Column({ alignItems: HorizontalAlign.Start }) {
  Tabs() {
    // TabContent
  }
  .width('100%')
}
回到顶部