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

梅科尔_平运宏

发布于 2024-1-26 23:30

浏览

1收藏

一、开发环境：

DevEcoStudio版本：DevEco Studio 3.1 Release

SDK版本：3.2.2.5

API版本：91.
2.
3.
4.
5.

二、项目介绍：

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

界面功能：

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

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

图2-1 碳资产监控界面

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

#星计划#梅科尔工作室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])//线段结束,下一级线段起//与下一级相同
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

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

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;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

（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}){
    …
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

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)1.
2.
3.
4.
5.
6.
7.

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
  })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

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
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

（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);
  })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

四、总结：

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

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签