HarmonyOS鸿蒙Next中咨询一下Tab中的一些写法

Tabs() { TabContent() { Text(‘首页的内容’).fontSize(30) } .tabBar(‘首页’) TabContent() { Text(‘推荐的内容’).fontSize(30) } .tabBar(‘推荐’) TabContent() { Text(‘发现的内容’).fontSize(30) } .tabBar(‘发现’) TabContent() { Text(‘我的内容’).fontSize(30) } .tabBar(“我的”) }

这种写法和下列的这种写法差别是什么？

Tabs({ index: this.currentIndex }) { TabContent() { DiscoverView() } TabContent() { LearningView({ learnedId: $learnedId }) } TabContent() { MapView() } TabContent() { ConferenceView() } TabContent() { MineView() } } .layoutWeight(1) .barHeight(0) .scrollable(false) .onChange((index) => { this.currentIndex = index; ContinueModel.getInstance().data.mainTabIndex = index; if (AppStorage.get(‘audioPlayerStatus’) !== AudioPlayerStatus.IDLE) { AudioPlayerService.getInstance().stop().then(() => { AudioPlayerService.destroy(); }); } }) CustomTabBar({ currentIndex: $currentIndex }) } .width(AppConstants.FULL_PERCENT) .height(AppConstants.FULL_PERCENT) .backgroundColor((this.currentBreakpoint === BreakpointTypeEnum.LG && this.currentIndex === TabBarType.MINE) ? $r(‘app.color.clear_color’) : $r(‘sys.color.ohos_id_color_sub_background’))

这个 CustomTabBar({ currentIndex: $currentIndex })自定义组件为什么可以在Tabs的闭包外跟Tabs进行联动呢

更多关于HarmonyOS鸿蒙Next中咨询一下Tab中的一些写法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 1楼•18 天前

CustomTabBar({ currentIndex: $currentIndex })是因为currentIndex 和CustomTabBar的属性进行了双向绑定在CustomTabBar中改变这个属性的值也会影响到MainPage的变化，而MainPage中的currentIndex又与Tabs({ index: this.currentIndex })进行了一个索引绑定操作因此带动了整个页面的刷新和跳转

更多关于HarmonyOS鸿蒙Next中咨询一下Tab中的一些写法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼•18 天前

.onChange((index) => { this.currentIndex = index;})这个方法里会改变状态变量 this.currentIndex的值，CustomTabBar({ currentIndex: $currentIndex }) }中传入的也是这个状态变量，所以会同步更新吧

yuanlaile 3楼•18 天前

在HarmonyOS鸿蒙Next中，Tab的写法主要涉及TabContent和TabList组件。以下是一个简单的示例：

@Entry
@Component
struct TabExample {
  build() {
    Column() {
      TabList({ barPosition: 'top' }) {
        Tab('Tab1') {
          Text('Content of Tab1')
            .fontSize(20)
            .textAlign(TextAlign.Center)
        }
        Tab('Tab2') {
          Text('Content of Tab2')
            .fontSize(20)
            .textAlign(TextAlign.Center)
        }
        Tab('Tab3') {
          Text('Content of Tab3')
            .fontSize(20)
            .textAlign(TextAlign.Center)
        }
      }
      .width('100%')
      .height(50)

      TabContent() {
        TabPanel('Tab1') {
          Text('This is Tab1 content')
            .fontSize(20)
            .textAlign(TextAlign.Center)
        }
        TabPanel('Tab2') {
          Text('This is Tab2 content')
            .fontSize(20)
            .textAlign(TextAlign.Center)
        }
        TabPanel('Tab3') {
          Text('This is Tab3 content')
            .fontSize(20)
            .textAlign(TextAlign.Center)
        }
      }
      .width('100%')
      .height(200)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在这个示例中，TabList用于定义Tab标签，TabContent用于定义每个Tab对应的内容。TabPanel用于将内容与对应的Tab关联起来。barPosition属性可以设置Tab标签的位置，如top、bottom等。

yibo5220 4楼•18 天前

在HarmonyOS Next中，Tab组件常用于实现标签页切换。可以通过以下方式创建和使用Tab：

XML布局：

<TabLayout
    ohos:id="$+id/tabLayout"
    ohos:width="match_parent"
    ohos:height="50vp">
    <Tab
        ohos:text="Tab 1"
        ohos:id="$+id/tab1"/>
    <Tab
        ohos:text="Tab 2"
        ohos:id="$+id/tab2"/>
</TabLayout>

Java代码：

TabLayout tabLayout = (TabLayout) findComponentById(ResourceTable.Id_tabLayout);
Tab tab1 = (Tab) findComponentById(ResourceTable.Id_tab1);
Tab tab2 = (Tab) findComponentById(ResourceTable.Id_tab2);

tabLayout.addTabSelectedListener(new TabLayout.TabSelectedListener() {
    @Override
    public void onSelected(Tab tab) {
    // 处理选中事件
    }

    @Override
    public void onUnselected(Tab tab) {
    // 处理未选中事件
    }
});

动态添加Tab：

Tab newTab = new Tab(context);
newTab.setText("New Tab");
tabLayout.addTab(newTab);

通过这些方式，可以灵活地创建和管理Tab组件，实现标签页的切换功能。