HarmonyOS 听书 App 开发实战:发现页面实现

大家好，今天继续跟大家分享听书 App 的开发教程。本文要分享的是发现页面，效果图如下：本页面由三部分构成，分别是标题栏、内容列表和正在播放的音频信息，如图所示：标题栏和书架页面非常相似，只是菜单栏只有一个按钮，具体实现代码如下：

HdsNavDestination(){  …}.padding({top:AppStorage.get('topHeight') as number}).backgroundColor(this.backColor).hideBackButton(true).titleBar({  style:{    scrollEffectOpts:{      scrollEffectType: ScrollEffectType.GRADUAL_BLUR,    },  },  content:{    title:{      mainTitle:'发现',    },    menu:{      value:[        {          content:{            label:'',            icon:$r('app.media.sjSearch')          }        }      ]    }  }})

运行效果如下：剩余部分使用 Column 组件进行纵向排列，内容列表部分还是要注意，由于我们使用了 HdsNavDestination，所以要手动避让出标题栏的高度，所以第一个元素使用 Blank 组件留出 56 的高度。

具体代码如下：

ListItem(){  Row(){    Blank()      .height(56)  }}

接下来要说的是热门标签部分，它是根据每一个分类文字的内容自动适应元素组件大小，然后进行依次排列，看起来像横向的瀑布流，但是实现起来没有那么麻烦。

我们有一个弹性布局组件 Flex，使用它的自动换行特性可以快速实现这一布局，具体实现代码如下：

@State tags:string[] = ['心理成长','历史','商业财经','文学小说','科幻','悬疑推理','自我提升','传记']Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap,space:{main:{value:10,unit:LengthUnit.VP}}}){  ForEach(this.tags,(str:string,index)=>{    Text(str)      .fontColor(Color.White)      .fontSize(13)      .textAlign(TextAlign.Center)      .padding({left:10,right:10,top:6,bottom:6})      .backgroundColor('rgba(200,200,200,0.3)')      .borderRadius(4)      .margin({top:10})  })}

运行效果如下：精选播单部分是横向排列的三个元素，并不需要滚动，所以可以直接使用 Row 组件实现，具体代码如下：

Row(){                ForEach(this.bds,(item:BDClass,index)=>{                  Column({space:7}){                    Image(item.img)                      .width('100%')                      .height(143)                      .borderRadius(12)                      .objectFit(ImageFit.Fill)                    Text(item.title)                      .fontColor(Color.White)                      .fontSize(14)                      .fontWeight(FontWeight.Bold)                    Text(item.content)                      .fontColor('rgb(200,200,200)')                      .fontSize(13)                    Text(item.count)                      .fontColor('rgb(200,200,200)')                      .fontSize(13)                  }                  .alignItems(HorizontalAlign.Start)                  .width(100)                })              }              .width('100%')              .justifyContent(FlexAlign.SpaceAround)              .padding({top:10})

运行效果如下：音频信息部分使用横向布局两端对齐即可，具体代码如下：

Row(){  Row({space:6}){    Image($r('app.media.bodan2'))      .width(35)      .height(35)    Column(){      Text('瓦尔登湖')        .fontColor(Color.White)        .fontSize(13)      Text('第3章 自然之声')        .fontColor('rgb(200,200,200)')        .fontSize(13)    }    .alignItems(HorizontalAlign.Start)  }  Row({space:10}){    Image($r('app.media.barPlay'))      .width(32)      .height(32)    Image($r('app.media.sjList'))      .width(32)      .height(32)  }}.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceBetween).width('100%').height(50).backgroundColor('rgb(106,87,65)').padding({left:14,right:14})

运行效果如下：感谢阅读。