Soul音乐App 项目记录(二)

系列文章目录

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

---

第二章 Soul音乐APP

前言

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

---

一、首页

一、首页：

 struct Index {
  @State currentIndex: number = 0

  @Builder tabBuilder(title: string, image: ResourceStr, index: number) {
    Column({space: 4}) {
      Image(image)
        .fillColor(this.currentIndex === index ? Color.Black : Color.Gray)
        .width(22)
      Text(title)
        .fontSize(14)
        .fontColor(this.currentIndex === index ? '#000' : Color.Gray)
    }
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Tabs({barPosition: BarPosition.End}) {
      TabContent() {
        //首页组件
        indexDialog()
      }
        .tabBar(this.tabBuilder('首页', $r('app.media.index'), 0))
      TabContent() {
        Text('直播内容')
      }
      .tabBar(this.tabBuilder('直播', $r('app.media.live'), 1))
      TabContent() {
        Text('社区内容')
      }
      .tabBar(this.tabBuilder('社区', $r('app.media.community'), 2))
      TabContent() {
        Text('我的内容')
      }
      .tabBar(this.tabBuilder('我的', $r('app.media.mine'), 3))
    }
      .width('100%')
      .height('100%')
      .vertical(false)
      .backgroundColor('#F6F7Fb')
      .onChange(index => this.currentIndex = index)
  }
}

1.页面定义与状态：

@Entry和@Component装饰器表示这是一个页面的入口组件。
使用了@State装饰器定义了一个名为currentIndex的状态变量，用于跟踪当前选中的标签页索引。

代码如下：

@Entry
@Component
struct Index {
  @State currentIndex: number = 0

2.自定义TabBar构建器:

定义了一个名为tabBuilder的自定义构建器函数，用于动态生成底部导航栏的标签。
函数接收三个参数：title（标签文字）、image（标签图片资源）、index（标签索引）。
在构建器中，使用Column组件组合了Image和Text组件来创建标签样式。
使用三元表达式判断当前索引是否等于传入的索引，以此来设置Image的填充颜色和Text的字体颜色，以实现选中效果。

代码如下：

  @Builder tabBuilder(title: string, image: ResourceStr, index: number) {
    Column({space: 4}) {
      Image(image)
        .fillColor(this.currentIndex === index ? Color.Black : Color.Gray)
        .width(22)
      Text(title)
        .fontSize(14)
        .fontColor(this.currentIndex === index ? '#000' : Color.Gray)
    }
    .justifyContent(FlexAlign.Center)
  }

3.页面布局与内容:

在build方法中，使用Tabs组件构建了整个页面。
通过TabContent组件定义了四个不同的内容区域，每个区域都与底部导航栏的一个标签相对应。
第一个TabContent使用了导入的indexDialog组件作为内容，可能是首页的详细界面。
其余三个TabContent只是简单地展示了文本内容，作为示例。
每个TabContent都通过.tabBar方法调用了tabBuilder函数来设置对应的底部导航栏标签。
Tabs组件的onChange事件用于监听标签页切换，并将新的索引值赋给currentIndex状态变量。
设置了Tabs组件的宽度、高度、是否垂直滚动、背景颜色等样式属性。

代码如下：

 build() {
    Tabs({barPosition: BarPosition.End}) {
      TabContent() {
        //首页组件
        indexDialog()
      }
        .tabBar(this.tabBuilder('首页', $r('app.media.index'), 0))
      TabContent() {
        Text('直播内容')
      }
      .tabBar(this.tabBuilder('直播', $r('app.media.live'), 1))
      TabContent() {
        Text('社区内容')
      }
      .tabBar(this.tabBuilder('社区', $r('app.media.community'), 2))
      TabContent() {
        Text('我的内容')
      }
      .tabBar(this.tabBuilder('我的', $r('app.media.mine'), 3))
    }
      .width('100%')
      .height('100%')
      .vertical(false)
      .backgroundColor('#F6F7Fb')
      .onChange(index => this.currentIndex = index)
  }

二、推荐页结构：

代码如下：

  build() {
    Column() {
        Tabs() {
          TabContent() {
            //推荐页
            recommend()
          }
            .tabBar('推荐')
          TabContent()
            .tabBar('乐馆')
          TabContent()
            .tabBar('听书')
          TabContent()
            .tabBar('会员')
          TabContent()
            .tabBar('摇滚')
        }
      Row() {
        Text('音乐组件')
      }
    }
    .width('100%')
    .height('100%')
  }

---

总结

这段代码实现了一个包含四个底部标签页的应用页面：首页、直播、社区、我的。通过自定义的tabBuilder函数，动态生成了底部导航栏的标签，并根据当前选中的标签页索引来更新标签的样式。页面内容部分，首页使用了导入的indexDialog组件，其余页面只是简单地展示了文本内容作为示例。整个页面使用了鸿蒙OS的UI框架进行开发，具有良好的可读性和可维护性。