HarmonyOS仿网易云音乐设计

            

一，项目参考的原型应用（图形+文字说明）

1. 顶部导航栏：
   • 搜索功能： 顶部中央有一个搜索框，便于用户搜索音乐、歌单或内容。
   • 侧边菜单： 左上角的三条横线图标表示隐藏的侧边栏功能。
   • 右上角图标： 包含扫码和语音识别功能，适合快速操作。
2. 问候语及主要推荐模块：
   • 问候语： 页面显示“晚上好”，人性化设计增加亲和力。
   • 推荐内容：
     • 每日推荐：以卡片形式显示推荐音乐列表。
     • 私人雷达：个性化推荐功能。
     • 热门模块：提供特定主题的音乐推荐，例如“符合你口味的新鲜好歌”。
   • 每个推荐卡片都包含封面、标题和简要描述，用户可以快速点击播放。
3. 歌单推荐：
   • 以矩阵布局显示多个歌单，包括封面图和描述文字，便于浏览。
   • 封面图具有吸引力，与文本描述搭配能够提高点击率。
4. 播放控制条：
   • 位于页面底部，有当前播放的歌曲信息以及播放控制按钮，支持随时调整播放状态。
5. 底部导航栏：
   • 包含多个模块：
     1. 推荐：高亮显示，当前处于此页面。
     2. 发现：用于发现更多音乐内容。
     3. 漫游：可能是与音乐相关的趣味功能。
     4. 笔记：用户可以记录自己的音乐心得或感受。
     5. 我的：管理个人账户及收藏内容。

图1.网易云音乐-推荐页面

 顶部导航栏：

• 菜单和搜索功能：
  • 左上角有三条横线的菜单图标，右上角为搜索功能，便于用户快速查找或访问其他功能模块。
• 多标签导航：
  • 包括“音乐”、“播客”、“听书”、“直播”等，当前高亮的是“音乐”模块。

  二级导航：

• 在“音乐”模块下，有“精选”、“排行榜”、“VIP”、“歌单”、“助眠”等多个子模块，当前高亮为“精选”。
• 模块划分清晰，帮助用户快速进入感兴趣的内容区域。

  主推荐内容：

• 大幅轮播图：
  • 屏幕上方是一个大幅的横向滑动轮播图，用于展示热门推荐内容，如新专辑、热门活动等。
• 标题与描述：
  • 每个轮播图都有相关的标题或附加描述（如“热碟推荐”），吸引用户点击。

 精选歌单：

• 矩阵布局，显示多个推荐歌单，包括：
  • 播放次数： 每个歌单封面显示了播放次数，如“3.9万”、“108.0万”。
  • 歌单名称与描述： 简单描述增强歌单的吸引力，例如“经典老歌 珍贵永恒”。
  • 用户可以直接点击封面播放。

 新歌推荐：

• 分类显示了新的音乐专辑，包括专辑名称、简短标签（如“SQ”）和描述。

  底部播放条：

• 持续显示当前播放的音乐信息和播放控制功能，方便用户操作。

 底部导航栏：

• 包括“推荐”、“发现”、“漫游”、“笔记”和“我的”模块，当前选中的是“发现”模块，以红色图标高亮。

图2.网易云音乐-发现页面

  顶部导航栏：

• 菜单功能：
  • 左上角为三条横线图标，表示可以打开隐藏菜单。
• 多标签切换：
  • 包含“关注”和“推荐”两大模块，当前高亮的是“推荐”，以红色下划线标注。
• 新增发布功能：
  • 右上角为“+”号，用户可以通过点击发布动态或内容。

  内容展示区域：

• 布局方式：
  • 矩阵式卡片布局，分为多列显示，每列包含图片、文字和互动按钮。
• 内容类型：
  • 包括文字、图片和用户生成内容，呈现形式丰富。
  • 例如：
    • 第一列展示动漫截图，并附带一段文字“Miss也是miss”。
    • 第二列展示一张日常生活的照片，并附言希望相关事宜。
• 点赞和评论互动：
  • 每个卡片下方有作者昵称和点赞数量，提升用户参与感。

  底部导航栏：

• 包括“推荐”、“发现”、“漫游”、“笔记”和“我的”五大模块。
• 当前选中的模块是“笔记”，以红色图标高亮表示。

 底部播放条：

• 始终显示当前播放的歌曲信息，提供播放、暂停和切换歌曲的操作功能，便于音乐与社区内容的结合

图3.网易云音乐-笔记页面

 顶部用户信息：

• 头像与昵称：
  • 显示用户头像（未设置时为默认图标）和昵称“幻影_CUK8”。
• 用户状态：
  • 包含VIP身份（标注为灰色小标识）以及续费入口。
  • 显示地区、村龄（使用天数为355天）等社交属性，增强个性化展示。
• 操作功能：
  • 顶部有“添加状态”功能，便于用户更新个人动态或心情。
  • 右上角有搜索和更多选项图标，方便用户管理个人信息。

 用户统计数据：

• 包含关注人数、粉丝数、等级（Lv.0）以及累计听歌时长（0.5小时）。
• 简洁明了的数据呈现，鼓励用户参与和互动。

  功能入口模块：

• 包含以下快捷入口：
  • 最近：显示最近访问或收藏的内容。
  • 本地：管理本地音乐文件。
  • 网盘：云存储音乐功能。
  • 装扮：用于设置页面或头像装饰。
• 模块布局整齐，便于快速操作。

 音乐分类及内容管理：

• 包含三个标签页：
  • 音乐：默认显示，包括“我喜欢的音乐”、“听歌排行”、“新建歌单”、“导入外部歌单”等功能。
  • 播客：管理用户订阅或收藏的播客内容。
  • 动态：展示用户发布的动态信息。
• 操作提示：
  • 每个功能下方提供简短说明（例如“轻松导入其他APP里的歌单”），降低操作门槛。

  底部导航栏：

• 当前选中“我的”模块（红色图标高亮），其他模块包括“推荐”、“发现”、“漫游”和“笔记”。

 底部播放控制条：

• 持续显示当前播放歌曲的标题、歌手和控制按钮，便于用户随时管理播放。

图4.网易云音乐-我的界面

二、项目设计的功能模块（表格+文字说明）

	模块名称	功能描述	核心功能
1	推荐	展示个性化推荐内容，比如每日推荐和热门歌单	每日推荐、私人雷达、推荐歌单
2	发现	浏览更多音乐内容，比如排行榜和用户兴趣推荐	排行榜、猜你喜欢、流派分类
3	音乐	播放和管理音乐，包括播放列表和排行榜	播放控制、播放记录、音乐收藏
4	动态	个人信息展示和管理	用户档案、收藏管理
5	我的	个人信息展示和管理，包含听歌记录、收藏和设置	用户档案、收藏管理、听歌统计

表1-仿网易云功能表

1.  推荐模块：该模块用于展示个性化推荐内容，包括每日推荐、私人雷达以及推荐歌单，帮助用户快速找到符合其喜好的音乐内容。

2.发现模块：提供用户浏览更多音乐内容的功能，例如排行榜、猜你喜欢以及按照流派分类的音乐推荐，旨在扩展用户的音乐视野。

3.音乐模块：主要用于播放和管理音乐，支持播放控制、播放记录查看及音乐收藏功能，确保用户的听歌体验流畅高效。

4.动态模块：侧重于用户互动，支持动态发布、互动广场浏览和内容分享，增强用户的社交参与感。

5.我的模块：展示并管理个人信息，包括用户档案、收藏管理和听歌统计，让用户可以清晰地了解和定制自己的使用情况。

三、项目的初始UI设计（多图形+文字说明）

1. 推荐模块

• 页面内容：
  • 主推每日推荐、私人雷达等个性化内容。
  • 显示热门歌单和推荐歌曲，并提供快捷播放按钮。
• 布局设计：
  • 界面顶部为搜索框，方便用户快速检索内容。
  • 使用卡片式设计，直观展示推荐内容。

图5.仿网易云音乐-推荐界面

2. 发现模块

• 页面内容：
  • 包含猜你喜欢的推荐内容，按用户习惯展示可能喜欢的歌曲。
  • 提供VIP专属内容的标识，提升用户购买意愿。
• 布局设计：
  • 列表形式展示音乐，便于用户快速选择。

图6-仿网易云音乐-发现界面

3. 音乐模块

• 页面内容：
  • 音乐播放控制界面，包括播放列表、排行榜、收藏功能。
  • 支持批量播放和单曲播放。
• 功能亮点：
  • 显示当前播放的歌曲信息，包含封面、歌名和演唱者。
  • 提供分享、评论和收藏功能。

图7-仿网易云音乐-音乐界面

4. 动态模块

• 页面内容：
  • 动态广场展示用户发布的内容，包括图片、文字、音乐分享。
  • 支持点赞、评论、转发等互动功能。
• 用户交互：
  • 每条动态显示点赞数和评论数，激励用户参与互动。

图8-仿网易云音乐-动态界面

5. 我的模块

• 页面内容：
  • 展示用户信息，包括用户昵称、VIP等级等。
  • 界面底部展示个人创建和收藏的音乐内容。
• 视觉设计：
  • 网格布局呈现用户收藏的专辑，内容清晰可见。

图9-仿网易云音乐-我的界面

四、项目实现

1. 核心代码设计（图形+代码实现）

图10-仿网易云音乐-推荐界面核心代码

图11-仿网易云音乐-发现界面核心代码

@Entry
@Component
struct Recommend {
  @State
  value: number  = 10
  @Builder
  SearchInput() {
    Row() {
      Row({ space: 4 }) {
        Image($r('app.media.ic_search'))
          .width(20)
          .aspectRatio(1)
          .fillColor('#7a828e')
        Text('十年了你还是忘不掉TA吗')
          .fontColor('#7a828e')
          .layoutWeight(1)
        Image($r('app.media.ic_code'))
          .width(20)
          .aspectRatio(1)
          .fillColor('#7a828e')
      }
      .width('100%')
      .padding(12)
      .borderRadius('60')
      .backgroundColor(Color.White)
    }
    .width('100%')
    .padding(12)
  }

@Entry
@Component
struct Find {
  build() {
    Column() {
      Row() {
        Text('猜你喜欢').fontColor('#eaeaec')
      }
      .padding(24)
      .width('100%')

      Row() {
        List({ space: 12 }) {
          ForEach(songs, (item: songItemType, index: number) => {
            ListItem() {
              Row({ space: 12 }) {
                Row() {
                  Image(item.img)
                    .borderRadius(8)
                    .width(60)
                }

                Column({ space: 12 }) {
                  Text(item.name).fontColor('#e9e9e7')
                  Row({ space: 4 }) {
                    Text('VIP')
                      .fontSize(10)
                      .padding({
                        left: 6,
                        right: 6,
                        top: 2,
                        bottom: 2
                      })
                      .border({
                        width: 1,
                        color: '#c0a267'
                      })
                      .borderRadius(10)
                      .fontColor('#c0a267')
                    Text(item.author)
                      .fontColor('#aaa9af')
                      .fontSize(12)
                  }
                }
                .layoutWeight(1)
                .alignItems(HorizontalAlign.Start)

                Row() {
                  Image($r('app.media.ic_more'))
                    .fillColor('#aaa9af')
                    .width(24)
                }
              }
            }.onClick(() => {
              // 播放
               AvPlayerManager.singlePlay(item) // 播放单曲
            })

          })
          ListItem() {
            Row() {
              Text('我是有底线的~')
                .fontColor(Color.Gray)
            }
            .width('100%')
            .justifyContent(FlexAlign.Center)
            .padding(16)
          }
        }.width('100%').height('100%')
        .padding({
          left: 24,
          right: 24
        })
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }
}

图12-仿网易云音乐-音乐界面核心代码

export const songs: songItemType[] = [
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
    name: '直到世界的尽头',
    author: 'WANDS',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.m4a',
    id: '0000'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.jpg',
    name: '画',
    author: '赵磊',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.mp3',
    id: '0001'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.jpg',
    name: 'Sweet Dreams',
    author: 'TPaul Sax / Eurythmics',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.mp3',
    id: '0002'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.jpg',
    name: '奢香夫人',
    author: '凤凰传奇',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.m4a',
    id: '0003'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.jpg',
    name: '空心',
    author: '光泽',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.mp3',
    id: '0004'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.jpg',
    name: '反转地球',
    author: '潘玮柏',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.mp3',
    id: '0005'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.jpg',
    name: 'No.9',
    author: 'T-ara',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.m4a',
    id: '0006'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.jpg',
    name: '孤独',
    author: 'G.E.M.邓紫棋',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.m4a',
    id: '0007'
  },

  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.jpg',
    name: 'Lose Control',
    author: 'Hedley',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.m4a',
    id: '0008'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.jpg',
    name: '倩女幽魂',
    author: '张国荣',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.m4a',
    id: '0009'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.jpg',
    name: '北京北京',
    author: '汪峰',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.m4a',
    id: '0010'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.jpg',
    name: '苦笑',
    author: '汪苏泷',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.mp3',
    id: '0011'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.jpg',
    name: '一生所爱',
    author: '卢冠廷 / 莫文蔚',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.m4a',
    id: '0012'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.jpg',
    name: '月半小夜曲',
    author: '李克勤',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.mp3',
    id: '0013'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.jpg',
    name: 'Rolling in the Deep',
    author: 'Adele',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.m4a',
    id: '0014'
  },
  {
    img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.jpg',
    name: '海阔天空',
    author: 'Beyond',
    url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.m4a',
    id: '0015'
  }
]

图13-仿网易云音乐-动态界面核心代码

// 动态列表
export const momentList: momentListType[] = [
  {
    author: 'Feast-aws',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h0.jpg',
    content: '二十几岁的你，一无所有，也拥有一切！',
    comment: 604,
    like: 23382,
    song: songs[0]
  },
  {
    author: 'CeeYet',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h1.jpg',
    content: '画一个姑娘陪着我,再画一个姑娘陪着我',
    comment: 1237,
    like: 5482,
    song: songs[1]
  },
  {
    author: 'Z_HOUSC',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h2.jpg',
    content: '这个事还得从两个职业选手说起',
    comment: 8425,
    like: 4234,
    song: songs[2]
  },
  {
    author: '逆转大师',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h3.jpg',
    content: '听奢香夫人，做上岸女人！',
    comment: 7658,
    like: 11545,
    song: songs[3]
  },
  {
    author: 'Moriaty',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h4.jpg',
    content: '别一厢情愿的付出，他如果拒绝你了就别再纠缠了，别一次次满满热情得到的都是敷衍冷淡的回复，你不该这样的，你应该酷一点，别打扰真的是最好的选择。',
    comment: 543,
    like: 2234,
    song: songs[4]
  },
  {
    author: '丶你要去哪里',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h5.jpg',
    content: '当年会一段潘帅的RAP是很拉风的事情',
    comment: 14415,
    like: 36297,
    song: songs[5]
  },
  {
    author: '一个人的某泥',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h6.jpg',
    content: '抗韩二十年，死于朴智妍',
    comment: 1237,
    like: 5482,
    song: songs[6]
  },
  {
    author: '曾经那个少年1993',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h7.jpg',
    content: '一个人去游泳，像投河；倒过来，一个人去投河，像游泳，太孤独。 ———-陈小三',
    comment: 7628,
    like: 36448,
    song: songs[7]
  },
  {
    author: '柳崽崽阿',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h8.jpg',
    content: '哎呦，B站来的跟我一起摇��',
    comment: 1237,
    like: 5482,
    song: songs[8]
  },
  {
    author: '李富贵他哥',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h9.jpg',
    content: '我弟弟老是偷我的裙子丝袜穿，我担心他在女装的道路上越走越远，这让我这个当哥哥的很是担心啊',
    comment: 7362,
    like: 11482,
    song: songs[9]
  },
  {
    author: '一檀溪一',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h10.jpg',
    content: '想起张雪峰说过的全世界最大的社区天通苑，住了400w人，光是地铁修了三站，去赶早上第一班天通苑的地铁，那才是真正的北京，真的是哭辽',
    comment: 6496,
    like: 8526,
    song: songs[10]
  },
  {
    author: '-_Dimple_',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h11.jpg',
    content: '今天为了赶地铁在电梯上摔了一跤，手磕破了，马上起来进了地铁结果发现一着急坐反了。某一刻觉得自己长大了，摔倒了不是先难受，想哭觉得丢脸，而是想着快点赶上地铁。大概成年人的无奈就是没时间让我难过一会儿吧。',
    comment: 1237,
    like: 5482,
    song: songs[11]
  },
  {
    author: 'h奔放小青年',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h12.jpg',
    content: '关于这部电影看到过一个评论：当年大学毕业以后我和女友各奔东西，曾经一个晚上，偶然又看了这部电影，当至尊宝拥吻紫霞的时候荡气回肠的歌声也让我潸然泪下。。。。。第二天我打起行囊踏上火车往她家赶，如今十年过去，我们已经有了一个可爱的女儿。 我想，这是对一部电影最好的肯定吧',
    comment: 1237,
    like: 5482,
    song: songs[12]
  },
  {
    author: '您的坑友已上线',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h13.jpg',
    content: '李克勤说他唱了三十多年的歌，当接下面具的时候还很紧张，还很担心自己能不能被大家认出来，然后当《红日》想起来的时候，自己都被感动了。前天看张信哲在央视的开讲啦，坦言面对"过气“一次能够接受，撒贝宁说的很好，这批歌迷也许不会通过刷微博来支持，但是他在这些人的心里比微博上更重要。',
    comment: 1237,
    like: 5482,
    song: songs[13]
  },
  {
    author: '一个人的某泥',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h14.jpg',
    content: '11年初三，无意中听到这首歌，推荐给同学，他们都说一般般。当我在家外放这首歌时，我奶奶对我说：“这什么歌，这么好听。',
    comment: 1237,
    like: 5482,
    song: songs[14]
  },
  {
    author: '一个人的某泥',
    avatar: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/h15.jpg',
    content: '文不黑周树人 武不黑李小龙 音不黑黄家驹 影不黑周星驰',
    comment: 1237,
    like: 5482,
    song: songs[15]
  }
]

图14-仿网易云音乐-我的界面核心代码

// 个人信息
      Column() {
        Column() {
          Image($r('app.media.ic_touxiang'))
            .width('90%')
        }
        .backgroundColor(Color.Black)
        .width(80)
        .aspectRatio(1)
        .borderRadius(80)
        .offset({ y: -40 })

        Column({ space: 12 }) {
          Row({ space: 8 }) {
            Text('网易云音乐')
              .fontColor(Color.White)
              .fontSize(20)
            Image($r('app.media.ic_vip'))
              .width(40)
          }
          .offset({ y: -15 })

          Row() {
            Image($r('app.media.ic_boy'))
              .width(14)
              .fillColor('#ff23496b')
              .margin({ right: 4 })
            Text('00后')
              .fontColor('#555')
              .margin({ right: 12 })
              .fontSize(14)
            Text('双子座')
              .fontColor('#555')
              .margin({ right: 12 })
              .fontSize(14)
            Text('北京')
              .fontColor('#555')
              .margin({ right: 12 })
              .fontSize(14)
            Text('歌龄·18年')
              .fontColor('#555')
              .margin({ right: 12 })
              .fontSize(14)
          }

          Row() {
            Text('1 关注')
              .fontColor('#555')
              .margin({ right: 12 })
              .fontSize(14)
            Text('100万 粉丝')
              .fontColor('#555')
              .margin({ right: 12 })
              .fontSize(14)
            Text('1.67亿 赞')
              .fontColor('#555')
              .margin({ right: 12 })
              .fontSize(14)
          }
        }
      }
      .width('100%')
      .height('25%')
      .backgroundColor('#3c3f41')
    }
    .width('100%')
  }
}

2.项目运行效果（图形+文字说明）

点击网易云音乐的图标进入App，然后会进入到欢迎页面，倒计时5秒后进入到动态界面，可点击跳过按钮跳过。在动态页面点击播放按钮，可播放歌曲，比如播放直到世界的尽头。点击底部导航栏的发现，切换至发现界面，点击猜你喜欢的任何一首歌曲可进行播放。点击底部导航栏的music，切换至音乐界面，同理点击任何一首歌曲可进行播放;点击底部导航栏的动态，切换至动态界面，可在上面看到大家的动态;点击底部导航栏我的，可进入到我界面，查看自己头像。

图15-仿网易云音乐-网易云音乐图标

图16-仿网易云音乐-启动页

图17-仿网易云音乐-推荐界面

图18-仿网易云音乐-音乐界面

图18-仿网易云音乐-发现界面

图19-仿网易云音乐-我的界面

图19-仿网易云音乐-动态界面

• 五，项目总结

  1. 项目设计中遇到的错误情况？
     1. 点击跳过按钮，无法跳过，发现是未进行计时。
     2. 加载网络图片，无法加载，发现是链接有错误。
     3. 播放歌曲，没有声音，发现原来是忘了开声音。

1. 1. 项目可以在哪些方面进行改进？
      1. 增加搜索歌曲的能力
      2. 增加更换头像的功能
      3. 通过接口获取歌曲，而不是写死的

1. 1. 项目在现实生活中的应用场景？
      1. 用户在日常通勤、学习、工作等场景中，可听歌放松。
      2. 挑选自己喜欢的歌曲进行学习
      3. 和好友一起分享自己喜欢的歌曲，进行互动。