#星计划#梅科尔工作室HOS-鸿蒙原生应用智碳科技 原创 精华
一、开发环境：
DevEcoStudio版本：DevEco Studio 3.1 Release
SDK版本：3.2.2.5
API版本：9二、项目介绍：
本项目的智碳科技APP可以为用户提供碳盘查、碳会计报告的查看、实时碳排的监控、设备的智能控制等功能，助力用户向低碳生活方向迈进。
界面功能：
1.碳资产监控与管理界面，实时展示用户碳配额，帮助用户实时掌握碳资产情况。
图2-1 碳资产监控界面
2.静态碳核算界面，用户填写碳排放原料消耗，自动填充排放因子，生成碳会计报告。
图2-2 静态碳核算界面
3.智能控制减排方案，根据耗碳情况进行设备的自适应调节，结合控制确保用户优先级。
图2-3 设备控制界面
三、基于HarmonyOS的功能开发：
1.折线图、柱状图：
（1）通过类定义，函数定义，数据调用，ForEach循环渲染搭建的可传输数据的折线图组件。
图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属性添加透明度，渲染生成颜色富有变化的柱状图组件
图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结合点击事件布尔值判断实现动态按钮滑动
图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与父子组件调用，实现个性化导航栏与代码整理
图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和组件，详细的官方文档，带领我从一个小白一步步走进前端开发的大门，先是小功能实现，再到自定义的开发，鸿蒙让我们能够轻松实现各种功能，让开发者有更多精力专注于功能的实现和创新，使我们可以更好地满足用户的个性化需求，创造出更加丰富多样的应用场景。期待着与更多的开发者一起共同探讨和实践鸿蒙开发技术，发挥我们的无限想象。
感觉要用很多传感器
页面设计的挺好看的