HarmonyOS鸿蒙Next中这样的效果用Tabs组件如何实现？

HarmonyOS鸿蒙Next中这样的效果用Tabs组件如何实现？ 这样的效果用Tabs组件如何实现？设置barMode(BarMode.Scrollable)，使得导航条居左对齐

现在设置只是居中对齐。

3 回复

试试

@Entry
@Component
struct TabsExample1 {
  @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)
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .width(100)
    .height(60)
    .borderRadius({ topLeft: 10, topRight: 10 })
    .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)
              })
            }
            .justifyContent(FlexAlign.Start)
          }
          .align(Alignment.Start)
          .scrollable(ScrollDirection.Horizontal)
          .scrollBar(BarState.Off)
          .width('90%')
        }
        .alignItems(VerticalAlign.Bottom)
        .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
        })
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中这样的效果用Tabs组件如何实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用Tabs组件实现类似效果可以通过以下步骤完成：

  1. 引入Tabs组件：首先在项目中引入Tabs和TabContent组件。

  2. 定义Tabs和TabContent：在布局文件中定义Tabs和TabContent，并设置对应的标签和内容。

  3. 设置样式和事件：通过属性设置Tabs的样式，如字体大小、颜色等，并绑定点击事件以切换内容。

  4. 动态更新内容：根据用户选择的Tab动态更新TabContent中的内容。

示例代码：

<Tabs
    ohos:id="$+id:tabs"
    ohos:height="match_parent"
    ohos:width="match_parent">
    <Tab
        ohos:text="Tab1"
        ohos:width="match_content"
        ohos:height="match_content"/>
    <Tab
        ohos:text="Tab2"
        ohos:width="match_content"
        ohos:height="match_content"/>
</Tabs>
<TabContent
    ohos:id="$+id:tab_content"
    ohos:height="match_parent"
    ohos:width="match_parent">
    <Text
        ohos:text="Content for Tab1"
        ohos:height="match_parent"
        ohos:width="match_parent"/>
    <Text
        ohos:text="Content for Tab2"
        ohos:height="match_parent"
        ohos:width="match_parent"/>
</TabContent>

在代码中通过TabsController来控制Tab的切换：

Tabs tabs = (Tabs) findComponentById(ResourceTable.Id_tabs);
TabContent tabContent = (TabContent) findComponentById(ResourceTable.Id_tab_content);
tabs.setFixedMode(true);
tabs.addTabSelectedListener(new Tabs.TabSelectedListener() {
    @Override
    public void onSelected(Tab tab) {
        int position = tabs.getSelectedTabPosition();
        tabContent.setCurrentPage(position);
    }
    @Override
    public void onUnselected(Tab tab) {}
    @Override
    public void onReselected(Tab tab) {}
});

通过这些步骤，可以在HarmonyOS中实现Tabs组件的切换效果。

在HarmonyOS鸿蒙Next中，可以通过Tabs组件实现页签切换效果。首先，在布局文件中定义Tabs和TabContent，然后将每个TabContent与对应的页面内容关联。通过TabsController控制页签的切换和状态管理。具体步骤如下：

  1. 在XML布局中添加Tabs和TabContent组件。
  2. 在Java/Kotlin代码中初始化TabsController，并绑定到Tabs组件。
  3. 为每个TabContent设置对应的页面内容。
  4. 通过TabsController的changeTab方法实现页签切换。

这样即可实现类似页签切换的效果。

回到顶部