HarmonyOS 鸿蒙Next tabs 组件中如何添加常驻UI组件，比如 播放条

HarmonyOS 鸿蒙Next tabs 组件中如何添加常驻UI组件，比如 播放条

tabs组件中间怎么添加常驻UI组件？ 我用tabs组件实现了页面切换，现在页面中间需要放置一个常驻的播放条，但我发现只能在每个 tabcontent中添加一个播放条，导致重复添加了很多个。请问是否能在tabbar和tabcontent中间添加UI组件？

3 回复
按照我的理解是要在每个页面放上播放条

可以尝试 Stack 其中的position是我写的一个定值，具体高度可以参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5；

[@Entry](/user/Entry)
[@Component](/user/Component)
struct TabsPage {
  build() {
    Stack() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

    TabContent() {
      Text(<span class="hljs-string">'推荐的内容'</span>).fontSize(<span class="hljs-number">30</span>)
    }
    .tabBar(<span class="hljs-string">'推荐'</span>)

    TabContent() {
      Text(<span class="hljs-string">'发现的内容'</span>).fontSize(<span class="hljs-number">30</span>)
    }
    .tabBar(<span class="hljs-string">'发现'</span>)

    TabContent() {
      Text(<span class="hljs-string">'我的内容'</span>).fontSize(<span class="hljs-number">30</span>)
    }
    .tabBar(<span class="hljs-string">"我的"</span>)
  }

  Row() {
  }
  .backgroundColor(Color.Red)
  .width(<span class="hljs-string">"100%"</span>)
  .height(<span class="hljs-number">30</span>)
  .position({
    y: <span class="hljs-number">700</span>
  })
  .onClick(() =&gt; {
    console.log(<span class="hljs-string">"ffff"</span>)
  })
  .visibility(Visibility.Visible)
}

}
}

更多关于HarmonyOS 鸿蒙Next tabs 组件中如何添加常驻UI组件，比如 播放条的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


用stack试试看？

在HarmonyOS 鸿蒙Next中，tabs组件用于实现页面间的快速切换，而要在tabs组件中添加常驻UI组件（如播放条），可以通过以下方式实现：

首先，需要确保播放条组件（如Video组件或其他自定义播放条组件）与tabs组件处于同一层级或可通过布局调整至合适位置。在tabs组件的外部，可以使用容器组件（如Divider、Column等）来包裹tabs和播放条，以实现布局上的统一。

其次，播放条组件应设置为常驻，即不受tabs切换影响。这可以通过设置播放条组件的显示属性或布局属性来实现，确保其始终可见。

最后，在编码实现时，需注意tabs组件与播放条组件之间的交互逻辑。例如，播放条的控制按钮（播放、暂停等）应能正常控制视频播放，且不应受tabs切换的干扰。

如果播放条需要响应全局事件（如系统音量变化、屏幕旋转等），则还需在应用中添加相应的事件监听和处理逻辑。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部