HarmonyOS Next应用开发实战——多功能页面组件构建（part2）

3. 美图鉴赏模块

展示两组滚动的图片，实现美图鉴赏的功能。

typescript 复制代码

Column(){
  Text('美图鉴赏').titleStyle()
  Column({ space: CommonConstants.PUBLIC_SPACE / 2 }){
    MarqueeImageComp({ imgList: [
      $r('app.media.back6'),
      $r('app.media.back7'),
      $r('app.media.back8'),
      $r('app.media.back9'),
      $r('app.media.back10')
    ] })
    MarqueeImageComp({ imgList: [
      $r('app.media.back5'),
      $r('app.media.back2'),
      $r('app.media.back7'),
      $r('app.media.back1'),
      $r('app.media.back4')
    ]})
  }
}
.columnStyle()

4. 了解更多信息展示

将"了解更多"的信息进行分组展示，并且可以水平滚动查看。

typescript 复制代码

Column(){
  Text('了解更多').titleStyle()
  Scroll(){
    Row({ space: CommonConstants.PUBLIC_SPACE }){
      ForEach(this.modificationLearnMoreList.reverse(), ( item: LearnMoreModelInfo[])=>{
        Column({ space: CommonConstants.PUBLIC_SPACE }){
          ForEach(item, (itemData: LearnMoreModelInfo)=>{
            LearnMoreItemComp({ itemData })
          })
        }
      })
    }.justifyContent(FlexAlign.End).alignItems(VerticalAlign.Top)
  }.width(CommonConstants.COLUMN_WIDTH).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
}
.columnStyle()

5. 车型活动展示

使用LazyForEach动态加载车型活动信息，并且可以水平滚动查看。

typescript 复制代码

Column(){
  Text('车型活动').titleStyle()
  Scroll(){
    Row({ space: CommonConstants.PUBLIC_SPACE }){
      LazyForEach(this.vehicleModelActivitiesList,( item: VehicleModelActivitiesInfo)=>{
        VehicleModelActivitiesComp({ itemData: item })
      })
    }
  }.width(CommonConstants.COLUMN_WIDTH).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
}
.columnStyle()

6. 金融计算器展示

展示金融计算器的计算结果，并设置背景图。

typescript 复制代码

Column(){
  Text('金融计算器').titleStyle()
  Row(){
    Text('计算结果')
      .textStyle(Color.White)
      .backgroundColor(Color.Black)
      .borderColor(Color.Black)
      .width(CommonConstants.COLUMN_WIDTH)
  }
  .height(150)
  .width(CommonConstants.COLUMN_WIDTH)
  .backgroundImage($r('app.media.back9'))
  .backgroundImageSize(ImageSize.Cover)
  .alignItems(VerticalAlign.Bottom)
  .padding({
    left: CommonConstants.PUBLIC_SPACE * 2,
    right: CommonConstants.PUBLIC_SPACE * 2,
    bottom: CommonConstants.PUBLIC_SPACE * 2
  })
}
.columnStyle()
.margin({ bottom: CommonConstants.PUBLIC_SPACE })

通过以上核心功能的实现，开发者可以在HarmonyOS Next应用中创建一个功能丰富的页面组件。##### 3. 美图鉴赏模块展示两组滚动的图片，实现美图鉴赏的功能。

typescript 复制代码

Column(){
  Text('美图鉴赏').titleStyle()
  Column({ space: CommonConstants.PUBLIC_SPACE / 2 }){
    MarqueeImageComp({ imgList: [
      $r('app.media.back6'),
      $r('app.media.back7'),
      $r('app.media.back8'),
      $r('app.media.back9'),
      $r('app.media.back10')
    ] })
    MarqueeImageComp({ imgList: [
      $r('app.media.back5'),
      $r('app.media.back2'),
      $r('app.media.back7'),
      $r('app.media.back1'),
      $r('app.media.back4')
    ]})
  }
}
.columnStyle()

4. 了解更多信息展示

将"了解更多"的信息进行分组展示，并且可以水平滚动查看。

typescript 复制代码

Column(){
  Text('了解更多').titleStyle()
  Scroll(){
    Row({ space: CommonConstants.PUBLIC_SPACE }){
      ForEach(this.modificationLearnMoreList.reverse(), ( item: LearnMoreModelInfo[])=>{
        Column({ space: CommonConstants.PUBLIC_SPACE }){
          ForEach(item, (itemData: LearnMoreModelInfo)=>{
            LearnMoreItemComp({ itemData })
          })
        }
      })
    }.justifyContent(FlexAlign.End).alignItems(VerticalAlign.Top)
  }.width(CommonConstants.COLUMN_WIDTH).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
}
.columnStyle()

5. 车型活动展示

使用LazyForEach动态加载车型活动信息，并且可以水平滚动查看。

typescript 复制代码

Column(){
  Text('车型活动').titleStyle()
  Scroll(){
    Row({ space: CommonConstants.PUBLIC_SPACE }){
      LazyForEach(this.vehicleModelActivitiesList,( item: VehicleModelActivitiesInfo)=>{
        VehicleModelActivitiesComp({ itemData: item })
      })
    }
  }.width(CommonConstants.COLUMN_WIDTH).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
}
.columnStyle()

6. 金融计算器展示

展示金融计算器的计算结果，并设置背景图。

typescript 复制代码

Column(){
  Text('金融计算器').titleStyle()
  Row(){
    Text('计算结果')
      .textStyle(Color.White)
      .backgroundColor(Color.Black)
      .borderColor(Color.Black)
      .width(CommonConstants.COLUMN_WIDTH)
  }
  .height(150)
  .width(CommonConstants.COLUMN_WIDTH)
  .backgroundImage($r('app.media.back9'))
  .backgroundImageSize(ImageSize.Cover)
  .alignItems(VerticalAlign.Bottom)
  .padding({
    left: CommonConstants.PUBLIC_SPACE * 2,
    right: CommonConstants.PUBLIC_SPACE * 2,
    bottom: CommonConstants.PUBLIC_SPACE * 2
  })
}
.columnStyle()
.margin({ bottom: CommonConstants.PUBLIC_SPACE })

通过以上核心功能的实现，开发者可以在HarmonyOS Next应用中创建一个功能丰富的页面组件。### HarmonyOS Next应用开发实战------多功能页面组件构建

文章概要

本文聚焦于HarmonyOS Next应用开发中多功能页面组件的构建。详细介绍了一个具备多种功能模块的页面组件，包括背景图展示、预约试驾与订购按钮、美图鉴赏、了解更多信息、车型活动展示以及金融计算器展示等功能的实现方式。

核心功能介绍

1. 数据初始化

在组件即将显示时，进行数据的初始化操作，包括车型活动列表和"了解更多"信息列表的处理。

typescript 复制代码

aboutToAppear(){
  this.vehicleModelActivitiesList.pushArrayData(VehicleModelActivities.getMainList())
  let tempArr: LearnMoreModelInfo[] = []
  for(let i = 0; i < this.learnMoreList.length; i++){
    tempArr.push(this.learnMoreList[i]);
    if(i % 3 === 0){  // 三个一组
      this.modificationLearnMoreList.push(tempArr);
      tempArr = [];
    }
  }
}

2. 背景图与操作按钮布局

构建一个带有背景图的页面，并且在底部添加"预约试驾"和"立即订购"按钮。

typescript 复制代码

Stack({ alignContent: Alignment.Bottom }){
  Image($r(this.imgStr))
    .width(CommonConstants.COLUMN_WIDTH).height(CommonConstants.COLUMN_HEIGHT)
  Flex({ justifyContent : FlexAlign.SpaceAround }){
    Text('预约试驾').textStyle(Color.White)
    Blank()
    Text('立即订购').textStyle(Color.Black).backgroundColor(Color.White)
  }
  .padding({
    left: CommonConstants.PUBLIC_SPACE * 2,
    right: CommonConstants.PUBLIC_SPACE * 2,
    bottom: CommonConstants.PUBLIC_SPACE * 3
  })
  .width(CommonConstants.COLUMN_WIDTH)
}
.width(CommonConstants.COLUMN_WIDTH).height(CommonConstants.COLUMN_HEIGHT)