音乐播放悬浮按钮该如何布局?

音乐播放悬浮按钮

HarmonyOS
2024-05-26 16:14:13
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
kraml

本文主要讲的是使用相对布局实现悬浮播放按钮的效果。

使用的核心API

RelativeContainer

核心代码解释

以List组件为父容器,以父容器为锚点,竖直方向顶头对齐,水平方向居中对齐,为row1。以Row为子容器相对父容器的位置固定不动,设置锚点为row2。

@Entry 
@Component 
struct ButtonPage { 
  build() { 
    RelativeContainer() { 
      List() { 
        ListItem() { 
          Image('./common/image/3.PNG') 
            .height(500).width('100%') 
        } 
        ListItem() { 
          Image('./common/image/4.PNG') 
            .height(500).width('100%') 
        } 
        ListItem() { 
          Image('./common/image/5.PNG') 
            .height(500).width('100%') 
        } 
      } 
      .alignListItem(ListItemAlign.Center) 
      .alignRules({ 
        top: { anchor: '__container__', align: VerticalAlign.Top }, //以父容器为锚点,竖直方向顶头对齐 
        middle: { anchor: '__container__', align: HorizontalAlign.Center } //以父容器为锚点,水平方向居中对齐 
      }) 
      .id('row1') //设置锚点为row1 
      Row() { 
        Button('播放按钮').width('100%').height(45) 
      } 
      .borderColor(Color.Black) 
      .width('100%') 
      .margin({bottom:20}) 
      .padding(20) 
      .borderRadius(16) 
      .alignRules({ 
        bottom: {anchor: "__container__", align: VerticalAlign.Bottom}, 
        middle: {anchor: "__container__", align: HorizontalAlign.Center} 
      }) 
      // .border({ width: 2, color: '#6699FF' }) 
      .id('row2') //设置锚点为row2 
    } 
    .width('100%') 
    .height('100%') 
  
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 21:40:16
相关问题
求大佬告知如何后台播放音乐
2359浏览 • 1回复 待解决
如何后台播放音乐,你知道吗?
2382浏览 • 1回复 待解决
HarmonyOS 悬浮按钮拖动问题
358浏览 • 1回复 待解决
HarmonyOS APP内悬浮按钮开发方案
87浏览 • 1回复 待解决
Android下述图片布局怎么解决?
5446浏览 • 2回复 待解决