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

@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%') 
  
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.