Soul音乐App 项目记录(三)

系列文章目录

第一章 Soul音乐APP
第二章 Soul音乐APP
第三章 Soul音乐APP
第四章 Soul音乐APP
第五章Soul音乐APP

---

第三章 Soul音乐APP

前言

综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。

---

一、首页之推荐页

1.总体结构：

build函数是主要的UI构建函数，使用了一系列嵌套的列（Column）和列表项（ListItem）来组织界面布局。

代码如下：

2.搜索框:

使用Row组件来水平排列搜索框和图片
Search组件是一个搜索框组件，它接受一个placeholder属性来设置占位符文本
设置了搜索框的占位符颜色为灰色（Color.Gray），占位符字体大小为14，文本字体大小也为14
通过.layoutWeight(1)，搜索框占据了Row中剩余的所有可用空间
使用Image组件来显示图片，图片资源引用自$r(‘app.media.music’)，表示从应用的资源文件中加载图片。
图片的宽度被设置为25个单位。
图片左右两边各有10个单位的外边距。

代码如下：

 ListItem() {
            //1.搜索框
            Row() {
              Search({placeholder: '搜索歌曲'})
                .placeholderColor(Color.Gray)
                .placeholderFont({size: 14})
                .textFont({size: 14})
                .layoutWeight(1)

              Image($r('app.media.music'))
                .width(25)
                .margin({left:10, right: 10})
            }
            .width('100%')
          }

3.推荐单:

代码片段描述了一个名为ListItem的组件，该组件内部包含了一个推荐图片轮播组件Swiper
使用Swiper组件来展示一组推荐图片。
Swiper组件内部使用了ForEach来遍历this.recommendImage列表
对于this.recommendImage列表中的每一项（命名为item，类型为recommendItem），都会渲染一个Image组件。
每个Image组件的源地址由item.src提供，宽度被设置为360个单位，并设置了边框圆角为5个vp
自动播放：
Swiper组件通过.autoPlay(true)设置了自动播放属性，这意味着图片轮播将会自动进行，而无需用户交互。

代码如下：

  ListItem() {
            //2.推荐单
            Swiper() {
              ForEach(this.recommendImage,
                (item: recommendItem) => {
                  Image(item.src)
                    .width(360)
                    .borderRadius('5')
                }
              )
            }
            .autoPlay(true)
          }

4.模块按钮:

Swiper组件可能是用来展示一组可滑动的图片和标题的组合。

1.使用ForEach来遍历this.modelImage列表，其中每一项都是modelItem类型，包含了图片的src和标题title。

2.图片和标题的布局：
对于每个modelItem，使用Column组件来垂直排列图片和文本。
图片的宽度被设置为30个单位，并且左右两边各有15个单位的外边距。
标题文本设置了字体大小为12，并且上边距为5个单位。

3.Swiper的配置：
.loop(false)：可能表示轮播不循环，即到达最后一页后不能回到第一页。
.width(‘95%’)：设置Swiper的宽度为其父容器的95%。
.indicator(false)：可能表示不显示指示器（如页码或点）。
.displayCount(5)：可能表示同时显示的项数（或页面）为5。
.margin({top: 20})：给Swiper组件设置了20个单位的顶部外边距。
.cachedCount(3)：可能表示缓存的项数或页面数为3。

代码如下：

  ListItem() {
            //3.模块
            Swiper() {
              ForEach(this.modelImage,
                (item: modelItem) => {
                  Column() {
                    Image(item.src)
                      .width(30)
                      .margin({left: 15, right: 15})
                    Text(item.title)
                      .fontSize(12)
                      .margin({top: 5})
                  }
                })
            }
            .loop(false)
            .width('95%')
            .indicator(false)
            .displayCount(5)
            .margin({top: 20})
            .cachedCount(3)
          }

---

总结

本次博客记录了App的推荐页的结构以及其中的三个小模块（搜索框、推荐表和模块按钮）