鸿蒙元服务从开发到上架 —— “每日格言”技术分享

// 创建一个导航控制器对象并传入NavigationpageInfos: NavPathStack = new NavPathStack();build() {  Navigation(this.pageInfos) {    // ...  }  .mode(NavigationMode.Stack)  .hideTitleBar(true)}

Stack() {  Image($r('app.media.bg'))    .objectFit(ImageFit.Fill)    .width('100%')    .height('100%')  Scroll() {    Column() {      Row() {        Search({ value: this.searchContent, placeholder: '关键字搜索...', controller: this.controller })          .searchIcon(new SymbolGlyphModifier($r('sys.symbol.magnifyingglass')).fontColor([$r('app.color.main_background')]))          .cancelButton({            style: CancelButtonStyle.CONSTANT,            icon: new SymbolGlyphModifier($r('sys.symbol.xmark')).fontColor([Color.Green])          })          .searchButton('搜索')          .width('70%')          .height(40)          .backgroundColor('#F5F5F5')          .placeholderColor(Color.Grey)          .placeholderFont({ size: 14, weight: 400 })          .textFont({ size: 14, weight: 400 })          .margin(20)          .onSubmit((value: string) => {            this.searchContent = value;            this.doSearch(this.searchContent)          })      }.width('100%')      .justifyContent(FlexAlign.Start)      Grid(this.scroller, this.layoutOptions) {        // ...      }      .columnsGap(8)      .rowsGap(8)      .columnsTemplate('1fr')      .width('100%')      .height('100%')      .padding({ left: 10, right: 10, bottom: 40 })    }    .width('100%')    .height('100%')    .margin({ bottom: 10 })  }.width('100%')  .scrollBar(BarState.Off)}

Grid(this.scroller, this.layoutOptions) {  LazyForEach(this.dataSource, (item: Poet) => {    GridItem() {      // 根据数据渲染格言卡片      Text(`${item.title}（${item.author}）`)        .width('100%')        .height(28)        .margin(10)        .fontColor($r('sys.color.font_primary'))        .fontSize(24)        .maxLines(1)        .textOverflow({ overflow: TextOverflow.Ellipsis })        .onClick(e => {          // 切换到Detail页面          // 将name指定的NaviDestination页面信息入栈,传递的参数为item          this.pageInfos.pushPathByName('PageDetail', item);          console.log('切换到Detail页面');        })    }  }, (item: Poet) => item.id + ''  )}

@Builderfunction TextLineBuilder(poet: Poet, color: string, index: number) {  if (poet) {    Stack() {      Image($r('app.media.type_' + index))        .objectFit(ImageFit.Fill)        .width('100%')        .height('100%')      Column(){        Text(poet.title)          .fontSize(24)          .fontWeight(FontWeight.Bold)          .fontColor(color)          .backgroundColor(Color.White)        Text(poet.author)          .fontSize(20)          .fontWeight(FontWeight.Medium)          .fontColor(color)          .backgroundColor(Color.White)        ForEach(poet.paragraphs, (paragraph: string, index: number) => {          Text(paragraph)            .fontSize(22)            .fontWeight(FontWeight.Lighter)            .fontColor(color)            .backgroundColor(Color.White)        })      }.width('100%')      .height('100%')      .justifyContent(FlexAlign.Center)    }    .width('100%')    .height('100%')  }}

Button('朗读').onClick(() => {  // 初始化文章列表  this.readInfoList = [    {      id: this.poet.id + '',      title: {        text: this.poet.title,        isClickable: true      },      author: {        text: this.poet.author,        isClickable: true      },      bodyInfo: this.poet.paragraphs.join('\n')    }  ]  this.selectedReadInfo = this.readInfoList[0]  // 朗读控件执行朗读  TextReader.start(this.readInfoList, this.selectedReadInfo?.id)    .catch((error: BusinessError) => {      console.error(`start failed, code: ${error.code}, message: ${error.message}`)    })}).margin(10)