有没有办法在HarmonyOS鸿蒙Next中定义好的tabBar上加一行固定的Row，用于完成类似网易云音乐app的底部播放器功能

有没有办法在HarmonyOS鸿蒙Next中定义好的tabBar上加一行固定的Row，用于完成类似网易云音乐app的底部播放器功能 我想完成类似于各大音乐app中的底部播放器功能，但是现在的tabs组件中的tabContent没有这一项功能，求助一下给位大佬有没有解决办法或思路！

图片


更多关于有没有办法在HarmonyOS鸿蒙Next中定义好的tabBar上加一行固定的Row，用于完成类似网易云音乐app的底部播放器功能的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

tabs+自定义tabbar+stack可以实现这个效果

cke_822.png

// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page4 {
  [@State](/user/State) fontColor: string = '#182431'
  [@State](/user/State) selectedFontColor: string = '#007DFF'
  [@State](/user/State) currentIndex: number = 0
  private controller: TabsController = new TabsController()

  [@Builder](/user/Builder) TabBuilder(index: number, name: string) {
    Column() {
      Image($r('app.media.icon')).width(30).height(30)
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .height(40)
        .lineHeight(40)
      // Divider()
      //   .strokeWidth(2)
      //   .color('#007DFF')
      //   .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%').height('100%').padding({
      top: 60
    })
    .backgroundColor('#FFBF00')
  }

  build() {
    Stack({
      alignContent: Alignment.Bottom
    }) {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column(){
            Text('1')
          }.width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.TabBuilder(0, 'green'))

        TabContent() {
          Column(){
            Text('2')
          }.width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.TabBuilder(1, 'blue'))

        TabContent() {
          Column(){
            Text('3')
          }.width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.TabBuilder(2, 'yellow'))

        TabContent() {
          Column(){
            Text('4')
          }.width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.TabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barHeight(130)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height('100%')
      .backgroundColor('#F1F3F5')

      Row(){
        Image($r('app.media.icon')).width(30).height(30).margin({right: 20})
        Text('play bar')
      }
      .height(60)
      .width('100%')
      .backgroundColor('#ccc')
      .justifyContent(FlexAlign.Center)
      .offset({
        y: -70
      })


    }.width('100%').height('100%')
  }
}

更多关于有没有办法在HarmonyOS鸿蒙Next中定义好的tabBar上加一行固定的Row，用于完成类似网易云音乐app的底部播放器功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


喔！感谢大佬！

我也在做网易云，但是我使用了tabs组件，它item选中状态的那个条不知道怎么改颜色，不和谐。

那个每个页面显示音乐播放组件播放如何做的？然后退出app，下拉控制栏里面如何继续播放音乐呢？

在HarmonyOS鸿蒙Next中，可以通过自定义TabBar组件来实现底部播放器功能。首先，使用@Component装饰器创建一个自定义的TabBar组件。在该组件中，使用Column布局容器，将TabBar和播放器Row进行垂直排列。TabBar部分可以使用Tabs组件实现，播放器Row部分可以使用Row组件实现，并设置其样式和内容。通过@State装饰器管理播放器状态，确保播放器Row在切换Tab时保持固定。最后，在EntryAbility或页面中使用该自定义TabBar组件替换默认的TabBar。

在HarmonyOS鸿蒙Next中，可以通过自定义TabBar组件来实现类似网易云音乐底部播放器的功能。你可以在TabBar上方添加一个固定的Row组件，用于显示播放器控件。具体步骤如下：

  1. 使用Column布局，将Row（播放器）和TabBar放在同一列中。
  2. 设置Row的position属性为fixed，确保其固定在底部。
  3. 调整TabBar的位置，使其位于Row上方。

示例代码：

Column() {
  // 播放器Row
  Row() {
    // 播放器控件
  }
  .width('100%')
  .height(60)
  .position({ x: 0, y: '100% - 60' })

  // TabBar
  TabBar() {
    // TabBar内容
  }
}

这样即可实现底部播放器功能。

回到顶部