#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技 原创 精华

梅科尔_平运宏
发布于 2024-1-26 23:30
浏览
1收藏

一、开发环境:

DevEcoStudio版本:DevEco Studio 3.1 Release

SDK版本:3.2.2.5

API版本:9

二、项目介绍:

本项目的智碳科技APP可以为用户提供碳盘查、碳会计报告的查看、实时碳排的监控、设备的智能控制等功能,助力用户向低碳生活方向迈进。

界面功能:

1.碳资产监控与管理界面,实时展示用户碳配额,帮助用户实时掌握碳资产情况。

#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技-鸿蒙开发者社区

#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技-鸿蒙开发者社区

图2-1 碳资产监控界面

2.静态碳核算界面,用户填写碳排放原料消耗,自动填充排放因子,生成碳会计报告。

#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技-鸿蒙开发者社区

#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技-鸿蒙开发者社区

图2-2 静态碳核算界面

3.智能控制减排方案,根据耗碳情况进行设备的自适应调节,结合控制确保用户优先级。

#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技-鸿蒙开发者社区

图2-3 设备控制界面

三、基于HarmonyOS的功能开发:

1.折线图、柱状图:

(1)通过类定义,函数定义,数据调用,ForEach循环渲染搭建的可传输数据的折线图组件。

#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技-鸿蒙开发者社区

图3-1 自定义折线图

对Line()线段组件开发,结合ForEach循环渲染,实现折线效果

ForEach(MainViewModel.getSettingColumnData_bg_4_jg(this.number_1,this.number_2,this.number_3,
this.number_4,this.number_5,this.number_6),(Item_zx:ItemData_2)=>{
  Line()
    .opacity(1)
    .height(10)
    .stroke('#F39423')
    .strokeWidth(2)
    .startPoint([Item_zx.number_1,Item_zx.number_3])//线段起//随意变动数据接口
    .endPoint([Item_zx.number_2,Item_zx.number_4])//线段结束,下一级线段起//与下一级相同
})

自定义外部类并进行参数传递,接收数据实现折线图动态跳动

getSettingColumnData_bg_4_jg(num : number,num_2 : number,num_3 : number,num_4 : number,num_5 : number,num_6 : number):
  Array<ItemData_2> {
  let settingListData: ItemData_2[] = [
    new ItemData_2(37,74,num,num_2),
    new ItemData_2(0,37,num_2,num_3),
    new ItemData_2(0,37,num_3,num_4),
    new ItemData_2(0,37,num_4,num_5),
    new ItemData_2(0,37,num_5,num_6),
  ];
  return settingListData;
}

(2)RECT组件搭配STACK组件堆叠效果,通过.opacity属性添加透明度,渲染生成颜色富有变化的柱状图组件

#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技-鸿蒙开发者社区

图3-2 自定义柱状图

STACK堆叠代码框架

Stack(){//柱状图+背景+左侧导航栏
  Row(){
    Column({space:22}){//左侧Y轴
      …
    }
    Column({space:20}){//线条,分线框
      
    Row(){//表格背景栅栏格
      …
    }
  }//背景+左侧导航栏
  //柱状图进度条组件,共五个分格,一格46个像素
  Column({space:13}){
    …
  }
  Column({space:13}){
    …
    }
  }
}

ForEach渲染Rect实现柱状图效果展示,.opacity属性优化界面展示效果

{
  ...
ForEach(MainViewModel.getSettingColumnData_zzt_1(),(Item_sj:ItemData_2)=>{
    Rect().width(Item_sj.number_2).height(25).fill(Color.Black)
  })
}.alignItems(HorizontalAlign.Start).width('88%').offset({x:42,y:8})
.opacity(0.1)

2.自定义小滑块组件:

使用.animation结合点击事件布尔值判断实现动态按钮滑动

#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技-鸿蒙开发者社区

图3-3 按钮滑动效果

.animation动态变化部分代码

Rect()
  .fill(Color.White)
  .radius(6)
  .width('50%')
  .height('100%')
  .offset({x:this.buer ? '50%' : 0})
  .animation({
    duration: 500,
    tempo: 1,
    curve: Curve.Ease,
    playMode: PlayMode.Normal,
    iterations: 1
  })

3.TAB组件界面实现预览

使用TAB组件搭配TabContent、TabBuilder与父子组件调用,实现个性化导航栏与代码整理

#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技-鸿蒙开发者社区

图3-4 导航栏预览效果

(1)使用Tab组件实现导航栏浏览功能

Tabs({ barPosition: BarPosition.End , controller: this.tabsController }) {
  TabContent() {//首页界面
    //调用首页界面
    Page_sy()
  }//首页
  .tabBar(this.TabBuilder('首页',0,$r('app.media.sy_l'),$r('app.media.sy_h')))
  TabContent() {//发现,第二界面
    //调用发现界面
    Page_fx()
  }//发现界面
  .tabBar(this.TabBuilder('发现',1,$r('app.media.zc_l'),$r('app.media.zc_h')))
  TabContent() {
    //调用我的界面
    Page_wd()
  }//我的
  .tabBar(this.TabBuilder('我的',2,$r('app.media.wd_l'),$r('app.media.wd_h')))
  .backgroundColor(Color.Pink)
}
.onChange((index) => {
  this.currentIndex = index
})

(2)使用TabBuilder实现对导航栏的自定义

@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg)//导航栏图片
      .size({ width: this.currentIndex === targetIndex ? 30 : 25 })
      .offset({y:-8})
    Text(title)//导航栏文本
      .fontColor(this.currentIndex === targetIndex ? '#2C77E5' : '#8a8a8a')
      .offset({y:-8})
      .fontWeight(FontWeight.Medium)
  }
  .width('100%')
  .height(70)
  .justifyContent(FlexAlign.Center)
  .onClick(() => {//点击事件逻辑实现导航栏动态变化
    this.currentIndex = targetIndex;
    this.tabsController.changeIndex(this.currentIndex);
  })
}

四、总结:

通过本次开发,我深刻感受到了鸿蒙“一次开发、多端部署”的独特魅力,极大地提升了项目的开发效率;丰富的API和组件,详细的官方文档,带领我从一个小白一步步走进前端开发的大门,先是小功能实现,再到自定义的开发,鸿蒙让我们能够轻松实现各种功能,让开发者有更多精力专注于功能的实现和创新,使我们可以更好地满足用户的个性化需求,创造出更加丰富多样的应用场景。期待着与更多的开发者一起共同探讨和实践鸿蒙开发技术,发挥我们的无限想象。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
4
收藏 1
回复
举报
2条回复
按时间正序
/
按时间倒序
wzhishun
wzhishun

感觉要用很多传感器

回复
2024-5-13 16:22:29
真庐山升龙霸
真庐山升龙霸

页面设计的挺好看的

回复
2024-5-14 11:47:28
回复
    相关推荐