ArkUI界面布局练习-歌曲列表

原创已于 2026-03-16 00:47:24 修改 · 42 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#数据库

于 2026-03-11 15:54:33 首次发布

页面布局练习代码

@Entry
@Component
struct Index{
  build() {
    Column(){
      Text('猜你喜欢')
        .fontColor('#ffff')
        .width('100%')
        .margin({bottom:10})
      List(){
        ListItem(){
          Row(){
            //图
            Image($r('app.media.startIcon'))
              .width(80)
              .border({radius:10})
              .margin({right:10})
            //字
            Column(){
              Text('歌曲01')
                .fontColor('#ffff')
                .width('100%')
                .fontWeight(700)
                .margin({bottom:15})
              Row(){
                Text('VIP')
                  .fontColor('#9A8E28')
                  .border({width:1,color:'#9A8E28',radius:12})
                  .padding({left:5,right:5,top:3,bottom:3})
                  .margin({right:10})
                Text('凤凰传奇')
                  .fontColor('#696969')

              }
              .width('100%')
            }
            .layoutWeight(1)
            //更多
            Column(){
              Image($r('app.media.bytedance'))
                .width(24)
                .height(24)
                .fillColor('#ffff')
            }
          }
          .width('100%')
          .height(80)
          // .backgroundColor(Color.Pink)
          .margin({bottom:10})
        }
      }
      .scrollBar(BarState.Off)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#131313')
    .padding({left:10,right:10})
    .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
  }
}

软件图标修改

icon：对应软件图标
label：对应软件名称

项目功能