鸿蒙--播放器状态控制

各个页面共享同一个播放状态，而且可以互相控制，如果传递来传递去会非常的麻烦，但是他们都是Tabs组件内的，我们在index页面提供一个状态，在各个组件接收即可

创建两个子组件，一个是播放控制的子组件，一个是背景播放的子组件

• 背景播放组件

@Component
struct BackPlayComp {
  @Consume
  isPlay:boolean
  build() {
    Row(){
      Row({space:20}){
        Image($r('app.media.startIcon')).width(40)
        Text('耍猴的 - 二手月季')
      }
      Image(this.isPlay?$r('sys.media.ohos_ic_public_pause'):$r('sys.media.ohos_ic_public_play'))
        .width(20)
        .aspectRatio(1)
        .onClick(()=>{
          this.isPlay=!this.isPlay
        })
    }
    .width('100%')
    .padding({left:20,right:20,top:6,bottom:6})
    .backgroundColor(Color.Grey)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
export {BackPlayComp}

• 播放控制组件

@Component
struct PlayControlComp {
  @Consume
  isPlay:boolean
  build() {
    Row({space:20}){
      Image($r('sys.media.ohos_ic_public_play_last'))
        .width(20)
        .aspectRatio(1)

      Image(this.isPlay?$r('sys.media.ohos_ic_public_pause'):$r('sys.media.ohos_ic_public_play'))
        .width(20)
        .aspectRatio(1)
        .onClick(()=>{
          this.isPlay=!this.isPlay
        })

      Image($r('sys.media.ohos_ic_public_play_next'))
        .width(20)
        .aspectRatio(1)
    }
    .width('100%')
    .padding(20)
    .backgroundColor(Color.Pink)
    .justifyContent(FlexAlign.Center)
  }
}
export {PlayControlComp}

• 父组件

import { BackPlayComp } from './components/BackPlayComp'
import { PlayControlComp } from './components/PlayControlComp'

@Entry
@Component
struct Index {
  @State
  list: TabInterface[] = [{
    icon: $r("app.media.ic_public_message"),
    selectIcon: $r('app.media.ic_public_message_filled'),
    name: 'wechat',
    title: '微信',
  }, {
    icon: $r('app.media.ic_public_contacts_group'),
    selectIcon: $r('app.media.ic_public_contacts_group_filled'),
    name: 'connect',
    title: '联系人',
  }, {
    icon: $r('app.media.ic_gallery_discover'),
    selectIcon: $r('app.media.ic_gallery_discover_filled'),
    name: 'discover',
    title: '发现',
  }, {
    icon: $r('app.media.ic_public_contacts'),
    selectIcon: $r('app.media.ic_public_contacts_filled'),
    name: 'my',
    title: '我的',
  }]

  // 绑定当前tabs的激活索引
  @State
  currentIndex: number = 0

  @Provide
  isPlay:boolean = false
  @Builder
  tabBarItem(item: TabInterface) {
    Column({ space: 6 }) {
      Image(item.name === this.list[this.currentIndex].name ? item.selectIcon : item.icon)
        .width(20)
      Text(item.title)
        .fontSize(12)
        .fontColor(item.name === this.list[this.currentIndex].name ? '#1caa20' : '#000')
    }
  }

  @Builder
  CommonTabBar (item: TabInterface) {
    Column () {
      // 根据当前激活索引设置不同的颜色的图标
      Image(item.name === this.list[this.currentIndex].name ? item.selectIcon : item.icon)
        .width(20)
        .height(20)
      Text(item.title)
        .fontSize(12)
        .fontColor(item.name === this.list[this.currentIndex].name ? "#1AAD19": "#2A2929")
        .margin({
          top: 5
        })
    }
  }

  build() {
    Row() {
      Stack({alignContent:Alignment.Bottom}) {
        Tabs({ index: $$this.currentIndex }) {
          ForEach(this.list, (item: TabInterface) => {
            TabContent() {
              //   切换展示的内容放这里
              // Text(item.title)
              if (item.name === 'wechat') {
                PlayControlComp()
              } else if (item.name === 'connect') {
                PlayControlComp()
              }

            }.tabBar(this.tabBarItem(item))
          })
        }.barPosition(BarPosition.End)
        BackPlayComp()
          .translate({
            y:-60
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

interface TabInterface {
  name: string
  icon: ResourceStr
  selectIcon: ResourceStr
  title: string
}