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

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

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

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!