鸿蒙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应用开发,数据驾驶舱的相关介绍已经完毕。大家可以下载相关代码进行研究!

完整项目下载地址

相关推荐
SuperHeroWu72 小时前
【HarmonyOS】HarmonyOS和React Native混合开发 (一)之环境安装
react native·harmonyos·鸿蒙·开发环境·环境安装·rn·混合开发
轻口味2 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
无处安放的波澜2 小时前
【HarmonyOS 5.0】第十二篇-ArkUI公共属性(一)
华为·harmonyos·arkts·鸿蒙·鸿蒙系统
李洋-蛟龙腾飞公司3 小时前
HarmonyOS Next 应用元服务开发-分布式数据对象迁移数据文件资产迁移
分布式·华为·harmonyos
大土豆的bug记录3 小时前
鸿蒙历史搜索功能:tag标签根据文字宽度自动换行 展示更多
华为·harmonyos
轻口味3 小时前
【每日学点鸿蒙知识】Charles抓包、lock文件处理、WebView组件、NFC相关、CallMethod失败等
华为·harmonyos
凯子坚持 c4 小时前
编程新选择:深入了解仓颉语言的优雅与高效
华为
一个处女座的程序猿O(∩_∩)O5 小时前
开源鸿蒙 5.0 正式版发布
华为·harmonyos
程序猿会指北6 小时前
【鸿蒙(HarmonyOS)性能优化指南】内存分析器Allocation Profiler
性能优化·移动开发·harmonyos·openharmony·arkui·组件化·鸿蒙开发
程序猿会指北8 小时前
【鸿蒙(HarmonyOS)性能优化指南】启动分析工具Launch Profiler
c++·性能优化·harmonyos·openharmony·arkui·启动优化·鸿蒙开发