鸿蒙Harmony应用开发，数据驾驶舱页面的实现

先来看看我们要实现的驾驶舱的页面是什么样的

对于这种 响应式布局的页面构建，我们的脑子里面要有一个概念，就是"分而治之"。我们把这个页面进行分割，分割成不同的块然后再来逐个实现. 不难发现，我们可以将这个看到的效果简单的分割：1.首先在顶部有个banner轮播，我们称之为顶部区域。2.紧接着有个时间筛选的区域，这个筛选区域和上面的轮播有个层叠部分，筛选区域最下面有个5个TAB切换按钮.，3. 下面经营指标的展示。

所以我们可以用一个Column控件，分成head( ) ,option( ) ,biz( ) 三块来实现。由于整改页面的内容都比较长，所以在Column的外层在用一个Scroll组件来包裹。head( )和option( ) 之间的间隔可以用.margin({ top: -20 })来实现.

接下来我们来逐个讲述一下各个区域的实现:

• head( )

head头部区域是一个轮播图，我们用一个Stack层叠布局作为根布局，然后我们有个蓝色的背景图，作为整个背景。在一个Banner控件作为页面的内容，Banner 中每个ITEM的 内容大概是 左边文字 中间图标 右边文字的组成形式

对此我们将Banner的ITEM封装成一个单独的组件 大题实现部分如下 :

export struct BannerItemView {
  // @Link model: BannerItemModel
  @Prop model: BannerItemModel

  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 主要内容
      Row() {
        // 左侧文本
        Column() {
          Text(this.model.leftTile).fontColor(Color.White).fontSize(16)
          Text(`${this.model.leftValue}`)
            .fontColor("#00d8fe")
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 8 })
          Text('环比').fontColor(Color.White).fontSize(14).margin({ top: 8 })

          TriangleIcon({
            isUp: this.model.mQOQRate > 0,
            IconSize: 10
          }).margin({ top: 8 })
          Text(`${this.model.mQOQRate}%`).fontColor(Color.Red).fontSize(14).margin({ top: 8 })
        }
        .margin({ left: 15 })
        .alignItems(HorizontalAlign.Start)

        // 中间图片
        Image($r(this.model.mCenterImage))
          .objectFit(ImageFit.Contain)
          .width(200)
          .height(200)

        // 右侧文本
        Column() {
          Text('完成率').fontColor(Color.White).fontSize(16)
          Text(`${this.model.rightValue}%`)
            .fontColor("#00d8fe")
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 8 })
          Text('同比').fontColor(Color.White).fontSize(14).margin({ top: 8 })

          TriangleIcon({
            isUp: this.model.mYOYRate > 0,
            IconSize: 10
          }).margin({ top: 8 })
          Text(`${this.model.mYOYRate}%`).fontColor(Color.Red).fontSize(14).margin({ top: 8 })
        }
        .margin({ right: 15 })
        .alignItems(HorizontalAlign.End)
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .alignItems(VerticalAlign.Center)
    }
    .width('100%')
    .height('100%') // 可以根据需要调整高度
  }
}

Banner 组件鸿蒙官方也有，这边使用的是@abner/banner ，head的 大体实现如下

@Builder
header() {
  Stack({ alignContent: Alignment.Center }) {
    // 背景图
    Image($r('app.media.common_header_bg'))
      .width('100%')
      .height('100%')
      .objectFit(ImageFit.Cover)
    Banner({
      data: this.bannerModel,
      itemPage: this.itemPage,
      indicator: new DotIndicator()
        .itemWidth(8)
        .itemHeight(8)
        .selectedItemWidth(8)
        .selectedItemHeight(8)
        .color(Color.Gray)
        .selectedColor(Color.White),

      indicatorType: IndicatorType.bottomCenter,
      isLoop: true,
    })
    // BannerItemView({ model: this.bannerModel[0] })
  }.width('100%').height(300)
}

• option（）

  现在我们对option区域进行庖丁解牛，可以看到页面在垂直方向 先是一个年月日切换的控件，中间区域是显示当前选定的时间，紧接着底部是指标的快速定位切换

  关于第一个日月的切换控件，我们可以 用一个ROW 组件 来包裹Text组件，然后对于每个Text都占据.layoutWeight(1)

  即可达到相应的效果，中间的时间选择同样的是一个Text显示开始日期中间显示"-",最后在显示一个结束日期即可

  最下面用一个TABS添加5个TabContent()即可

  Tabs({ barPosition: BarPosition.Start }) {
    TabContent().tabBar('经营').height(0)
    TabContent().tabBar('会员').height(0)
    TabContent().tabBar('直销').height(0)
    TabContent().tabBar("商企").height(0)
    TabContent().tabBar("品质").height(0)
  }
  

  所以整体的代码大概是这样:

  @Builder
  option() {
    Column() {
      Row() {
        ForEach(['日', '周', '月', '季', '年'], (range: string) => {
          Text(range)
            .fontColor(this.currentTimeRange === range ? "#0000AA" : Color.Gray)
            .fontSize(18)
            .onClick(() => {
              this.currentTimeRange = range
              showToast("当前点击" + range)
            })
            .layoutWeight(1)//
            .fontWeight(FontWeight.Bold)
            .textAlign(TextAlign.Center)
        })
      }
      .backgroundColor("#f0f1f5")
      .margin({ top: 20 })
      .width('90%')
      .padding(10)
      .borderRadius(10)
  
      Row() {
        Column() {
          Text('2024-01-01')
            .fontSize(16)
            .fontColor(Color.Black)
  
        }
        .backgroundColor("#f0f1f5")
        .padding({
          left: 20,
          right: 20,
          top: 8,
          bottom: 8
        }).borderRadius(10).layoutWeight(1) //
  
        Text('-')
          .fontSize(18)
          .margin(10)
          .fontColor('#0000AA')
  
        Column() {
          Text('2024-08-16')
            .fontSize(16)
            .fontColor(Color.Black)
        }
        .backgroundColor("#f0f1f5")
        .padding({
          left: 20,
          right: 20,
          top: 8,
          bottom: 8
        }).borderRadius(10).layoutWeight(1) //
  
      }
      .backgroundColor(Color.White)
      .margin({ top: 20 })
      .width('90%')
      .justifyContent(FlexAlign.SpaceBetween)
      .borderRadius(10)
  
      Tabs({ barPosition: BarPosition.Start }) {
        TabContent().tabBar('经营').height(0)
        TabContent().tabBar('会员').height(0)
        TabContent().tabBar('直销').height(0)
        TabContent().tabBar("商企").height(0)
        TabContent().tabBar("品质").height(0)
      }
      .height(50) // 设置 Tabs 的高度，只显示 tabBar
  
    }
    .width('100%')
    .margin({ top: -20 })
    .borderRadius(28) // 添加这行来设置所有四个角的圆角为 8
    .backgroundColor(Color.White)
    .height('auto') // 或者不设置 height
  }
  

  • biz()

    此处的biz的展示其实我之前就有写过2篇博客来介绍 控件的实现

    自定义View上下箭头

    自定义View 圆形进度条

    对于此处先是Column作为最外层，紧接着展示了经营指标说明，酒店的数据量，以及就是水平 展示各个指标名称数据，增加减少，对应的完成率。

    所以此处大体的代码如下:

    @Builder
    biz() {
      Column() {
        this.commonTitle("经营指标")
    
        HotelNumView({ model: this.total_model })
        CockpitProgressView({ model: $model1 }).padding({ left: 10 })
        CockpitProgressView({ model: $model2 }).padding({ left: 10 })
        CockpitProgressView({ model: $model3 }).padding({ left: 10 })
    
        HotelNumView({ model: this.middle_model })
        CockpitProgressView({ model: $model11 }).padding({ left: 10 })
        CockpitProgressView({ model: $model12 }).padding({ left: 10 })
        CockpitProgressView({ model: $model13 }).padding({ left: 10 })
    
        HotelNumView({ model: this.low_model })
        CockpitProgressView({ model: $model21 }).padding({ left: 10 })
        CockpitProgressView({ model: $model22 }).padding({ left: 10 })
        CockpitProgressView({ model: $model23 }).padding({ left: 10 })
      }
      .width('100%')
      .margin({ top: 20 })
      .borderRadius({ topLeft: 28, topRight: 28 })
      .justifyContent(FlexAlign.Start) // 确保 Row 内的内容靠左对齐
      .alignItems(HorizontalAlign.Start)
      .backgroundColor(Color.White)
      .height('auto') // 或者不设置 height
      .padding({ bottom: 20 })
    }
    

我们可以看到 上述的 CockpitProgressView 中的model 都带了一个 " " 符号，因为我们这个数据是来自网络请求的，为了让父子组件之间能正常的传值，以及组件状态的刷新，我们边用 " "符号，因为我们这个数据是来自网络请求的，为了让父子组件之间能正常的传值，以及组件状态的刷新，我们边用 " "符号，因为我们这个数据是来自网络请求的，为了让父子组件之间能正常的传值，以及组件状态的刷新，我们边用""符号来设置我们的变量.

至此。我们的页面"小而全"的鸿蒙Harmony应用开发，数据驾驶舱的相关介绍已经完毕。大家可以下载相关代码进行研究!

完整项目下载地址