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

HarmonyOS鸿蒙Next ArkUI组件tabContent中，如何添加常驻UI组件，比如播放条 我用tabs组件实现了页面切换，现在页面中间需要放置一个常驻的播放条，但我发现只能在每个 tabcontent中添加一个播放条，导致重复添加了很多个。

能在tabbar和tabcontent中间添加常驻UI组件

3 回复

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

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

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

        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
      Row(){

      }.backgroundColor(Color.Red)
      .width("100%")
      .height(30)
      .position({
        y:700
      })
      .onClick(() =>{
        console.log("ffff")
      })
      .visibility(Visibility.Visible)
    }

  }
}

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


在HarmonyOS鸿蒙Next的ArkUI中，tabContent组件用于定义Tab页的内容。要在tabContent中添加常驻UI组件（如播放条），可以通过以下步骤实现：

  1. 布局结构：使用Column或Stack布局，将tabContent和常驻UI组件（如播放条）组合在一起。Column适合垂直排列，Stack适合叠加布局。

  2. 添加常驻组件：在布局中，将常驻UI组件（如播放条）放置在tabContent外部或特定位置，确保其在Tab切换时保持显示。

  3. 示例代码：

@Entry
@Component
struct TabContentWithPlayer {
    build() {
        Column() {
            // TabContent部分
            TabContent() {
                // 这里放置Tab页内容
            }

            // 常驻播放条
            PlayerBar()
        }
    }
}

@Component
struct PlayerBar {
    build() {
        // 播放条UI实现
    }
}

通过这种方式，播放条将在Tab切换时保持显示，不受Tab内容变化的影响。

在HarmonyOS鸿蒙Next的ArkUI中，若要在TabContent中添加常驻UI组件（如播放条），可以将播放条独立于Tabs组件之外，放在页面布局的底部。通过Flex布局或Column布局，将Tabs和播放条分别放置在不同的区域。例如，使用Column布局，将Tabs放在上方，播放条固定在底部。这样可以确保播放条在切换Tab时始终保持可见。

回到顶部