HarmonyOS 鸿蒙Next中Tabs容器怎么切换页签

HarmonyOS 鸿蒙Next中Tabs容器怎么切换页签 大家好，这是我写的代码

import { Item, Resul } from "./components/CommonComponent"

@Entry
@Component
struct GridDemo {
  @State currentIndex: number = 0;
  private tabsController: TabsController = new TabsController();
  @Builder TabBuilder(targetIndex: number,title: string) {
      Text(title)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }
  scroller: Scroller = new Scroller() //  可以控制滚动的控制器
  build() {

    Column({ space: 8 }) {
      Row() {
        Text("首页")
          .fontWeight(FontWeight.Bolder)
          .margin({ left: 15, top: 15 })
          .fontSize(24)
      }
      .height(70)
      .width("100%")

      Image($r("app.media.mateBookProX"))
        .width("95%")
        .height(200)
        .backgroundColor(Color.Grey)


      Grid() {
        ForEach(Resul.Result(),
          (item: Item) => {
            GridItem() {
              Column() {
                Image(item.image)
                  .width(50)
                Text(item.name)
              }
            }
          }
        )

      }
      .height(200)
      .width("95%")
      .columnsTemplate("1fr 1fr 1fr 1fr")
      .rowsTemplate("1fr 1fr")
      .columnsGap(8)
      .rowsGap(18)
      .backgroundColor(Color.Grey)

      Grid() {
        ForEach(Resul.Hot(),
          (item: Item) => {
            GridItem() {
              Column({ space: 5 }) {
                Text(item.name)
                Text(item.price.toString())
              }
              .justifyContent(FlexAlign.Center)
              .width(170)
              .height(90)
              .backgroundColor(Color.Pink)
            }
          }
        )
      }
      .margin({ right: 5, left: 5 })
      .height(200)
      .columnsTemplate('1fr 1fr')
      .rowsTemplate('1fr 1fr')

      Row() {
       /* Text("首页")
          .TextStyle()
        Text("我的")
          .TextStyle()*/
        Tabs({barPosition:BarPosition.Start,controller:this.tabsController}){
          TabContent(){
          }
          .tabBar(this.TabBuilder(0,'首页'))

          TabContent(){
          }
          .tabBar(this.TabBuilder(1,'我的'))

        }
        .vertical(false)//默认值 容器顶部 水平方向
        .barWidth('100%')
        .height(70)
      }
      .alignItems(VerticalAlign.Bottom)
      .height(70)
      .width("60%")
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .height('100%')

    // .backgroundColor(Color.Grey)
  }

  @Builder Onc(){

  }
}

@Extend(Text) function TextStyle(){
  .fontSize(30)
   .fontWeight(FontWeight.Bold)
}

这个是我的第二段代码

@Extend(TextInput) function TextInput_CSS(){
  .fontSize(20)
  .placeholderFont({size:20})

    .width('90%')
}
@Extend(Button) function Button_CSS(){
  .type(ButtonType.Circle)
  .height(70)
  .backgroundColor(Color.Grey)
}
@Component
@Entry
struct Register{
  build(){
    //Column容器
    Column({space:12}){
      Image($r("app.media.icon"))
        .width(100)
        .height(100)
        .margin({top:130})
      Text("登录界面")
        .fontWeight(FontWeight.Bold)
        .letterSpacing(10)
        .fontSize(20)
      Text("登录账号以使用更多服务")

      TextInput({placeholder:"请输入账号..."})
        .margin({top:20})
        .TextInput_CSS()
       // .padding({left:15,right:15})
      TextInput({placeholder:"请输入密码..."})
        .TextInput_CSS()
        .type(InputType.Password)

      Row(){
        Text("短信验证码登录")
          .fontColor(Color.Green)
        Text("忘记密码")
          .fontColor(Color.Green)
      }.width('85%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin(8)

      Button("登录")
        .margin({top:50})
        .width(300)
      Button("注册账号")
        .width(300)
        .backgroundColor(Color.Grey)

      Text("其他方式登录")
        .margin({top:30})

      Row({space:15}){
        Button("微信")
          .Button_CSS()
        Button("QQ")
          .Button_CSS()
        Button("支付宝")
          .Button_CSS()
      }.width("90%")
      .justifyContent(FlexAlign.SpaceBetween)

    }

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

这个怎么切换跳转啊，刚学习Harmony 实在不会


更多关于HarmonyOS 鸿蒙Next中Tabs容器怎么切换页签的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

使用scroller的changeIndex()方法。如下图，官方文档有介绍。

使用方法：this.scroller.changeIndex(index);

cke_350.png

更多关于HarmonyOS 鸿蒙Next中Tabs容器怎么切换页签的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


您好，你看看我上面的代码，第一个代码，上面声明了TabsController控制器，但是点击是没有办法跳转的，后来我想的是不是在两个类中都加入Tabs控制器，但是我加入进去后，还是发现，点击没有反应。

在HarmonyOS鸿蒙Next中，切换Tabs容器的页签可以通过TabContent和TabList组件实现。首先，在布局文件中定义Tabs容器，内部包含TabList和TabContent，分别用于显示页签标签和内容。通过TabList的onChange事件监听页签切换，并在TabContent中动态更新对应内容。示例代码如下：

Tabs() {
  TabList() {
    Tab().text('Tab1').onChange(() => { /* 切换逻辑 */ })
    Tab().text('Tab2').onChange(() => { /* 切换逻辑 */ })
  }
  TabContent() {
    // 根据TabList的选择动态更新内容
  }
}

通过这种方式，可以轻松实现页签的切换功能。

回到顶部