HarmonyOS 鸿蒙Next 如何对Tabs组件的bar栏自定义样式

HarmonyOS 鸿蒙Next 如何对Tabs组件的bar栏自定义样式

类似于
cke_651.png

文档中貌似没有对此进行描述


更多关于HarmonyOS 鸿蒙Next 如何对Tabs组件的bar栏自定义样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复 
自定义TabBar样式并引用

```typescript
[@Builder](/user/Builder) TabBuilder(index: number) {
    Column() {
        Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
            .width(24)
            .height(24)
            .margin({ bottom: 4 })
            .objectFit(ImageFit.Contain)
        Text(`Tab${index + 1}`)
            .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
            .fontSize(10)
            .fontWeight(500)
            .lineHeight(14)
    }.width('100%')
}

引用如下：

TabContent() {
    Column() {
        Text('Tab2')
            .fontSize(36)
            .fontColor('#182431')
            .fontWeight(500)
            .opacity(0.4)
            .margin({ top: 30, bottom: 56.5 })
        Divider()
            .strokeWidth(0.5)
            .color('#182431')
            .opacity(0.05)
    }.width('100%')
}.tabBar(this.TabBuilder(0))

更多关于HarmonyOS 鸿蒙Next 如何对Tabs组件的bar栏自定义样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


自己用Stack 盖在上面

@Entry
@Component
struct TabPage {
  private controller: TabsController = new TabsController()
  @State selectedIndex: number = 0

  build() {
    // RelativeContainer() {
    Stack() {
      Tabs({ controller: this.controller }) {
        TabContent() {
          HomePage()
        }

        TabContent() {
          PlanPage()
        }

        TabContent() {
          Text("focus")
        }

        TabContent() {
          Text("Second")
        }

        TabContent() {
          MinePage()
        }
      }
      .barWidth('80%')
      .barHeight(0)
      .barPosition(BarPosition.End)
      .barMode(BarMode.Fixed)
      .scrollable(false)
      .animationDuration(0)
      .id('Tabs')

      this.CustomTabs()
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  CustomTabs() {
  }
}

在HarmonyOS鸿蒙Next中，可以通过TabsController和Tabs组件对Tabs的bar栏进行自定义样式。首先，使用TabsController来管理Tabs的状态，然后通过Tabs组件的barStyle属性来设置bar栏的样式。

具体步骤如下：

  1. 创建TabsController对象，用于控制Tabs的切换和状态。
  2. 在Tabs组件中，使用barStyle属性来设置bar栏的样式。barStyle可以接受一个BarStyle对象，通过该对象可以设置背景颜色、高度、边框等样式属性。

例如：

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

  build() {
    Column() {
      Tabs({ controller: this.controller }) {
        TabContent() {
          Text('Tab 1')
        }
        TabContent() {
          Text('Tab 2')
        }
      }
      .barStyle({
        backgroundColor: Color.Blue,
        height: 50,
        border: { width: 1, color: Color.Black }
      })
    }
  }
}

在这个例子中，barStyle设置了背景颜色为蓝色，高度为50，边框为1像素的黑色边框。通过这种方式，可以实现对Tabs组件的bar栏进行自定义样式。

回到顶部