#HarmonyOS NEXT体验官#用鸿蒙实现天气展示效果​ 原创

小黄要努力
发布于 2024-7-31 13:05
浏览
0收藏

随着鸿蒙开发工具和文档内容的广泛开放,鸿蒙应用开发者的数量呈指数级增长,鸿蒙操作系统(HarmonyOS)在中国的市场份额,于今年第一季度首次超越苹果iOS,成为中国第二大智能手机操作系统,要知道,超过了第二,那就是第二。 关于鸿蒙技术的话题讨论也呈爆炸式增长,今天我看到这样一条提问,标题是这样的


“请问鸿蒙开发能实现天气展示的效果吗?(0.0当然能啊老弟)作为一个新技术实现起来会很难吧?(-.- !你在说什么胡话,超过20分钟我倒立洗头)有没有大佬能实现的?(行,你等着你)代码量会比安卓或者ios多吗?”(包少的

#HarmonyOS NEXT体验官#用鸿蒙实现天气展示效果​-鸿蒙开发者社区


好一个问题少年我上去就是一个720℃托马斯大回旋,凌空360度陀螺旋转打开我这篇文章给他看一看,鸿蒙实现这个天气有多简单。

#HarmonyOS NEXT体验官#用鸿蒙实现天气展示效果​-鸿蒙开发者社区


错落有致的数据,蓝宝石底色,加上象牙白字体和图标,你说这是艺术品我都信!!!


那有人可能会问了,这么精美的页面需要怎么规划才能实现?


首先就是数据的声明


我们把数据通过json格式定义好

@State weatherObj:any = {
杭州",
 "cityId": 1001,
 "cityCode": "10000000",
 "date": "2024-7-23",
星期二",
 "temp": "41",
东风",
级",
晴转暴雨",
 "hourly": [{
 "time": "9:00",
晴天"
 "temp": "38℃",
 "img": '/images/qingtian.png'
 },

 ],
 "weatherList":[
 {
星期三",
晴天",
 "img": '/images/qingtian.png',
 "max":"40℃",
 "min":"31℃"
 },
 ]
}

然后就是布局的书写和数据的填充



简单的布局组件 Row(横向) Column(竖向) 控制页面方向文本组件 Text 展示文字图标组件 Image 展示图标列表组件 List 展示列表

在其他应用开发中,想知道一个组件的使用方法,那可糟老罪了,但是,今天你使用的是HarmonyOS,你甚至只需要知道组件的定义就好,详细的用法你只需要把鼠标放到组件上,然后点击右下角的 shoow....即可,查看详细用法,真的是碉堡了

我们把页面分为三块,首先是头部部分

#HarmonyOS NEXT体验官#用鸿蒙实现天气展示效果​-鸿蒙开发者社区


代码如下

Row(){
 Image('/images/menu.png')
 .width(20)
 .height(20)
 Text(this.weatherObj.city)
 .fontColor(Color.White)
 .fontSize(30)
 .margin({top:40})
 Image('/images/search.png')
 .width(20)
 .height(20)
}
.justifyContent(FlexAlign.SpaceBetween)
.padding({left:20,right:20})
.width('100%')


Text(this.weatherObj.temp + '℃')
 .fontSize(60)
 .fontColor(Color.White)
 .margin({top:30})
Text(this.weatherObj.weather+ ',' + this.weatherObj.winddirect + this.weatherObj.windpower)
 .fontSize(20)
 .fontColor(Color.White)

然后是今日天气部分

#HarmonyOS NEXT体验官#用鸿蒙实现天气展示效果​-鸿蒙开发者社区


这里我们是一个横向列表的展示所以用到了list组件代码如下



Text('今日天气')
 .fontColor(Color.White)
 .fontSize(25)
 .fontWeight(600)
List({space:30}){
 ForEach(this.weatherObj.hourly,(item:any)=>{
 ListItem(){
 Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
 Text(item.time)
 .fontColor(Color.White)
 .fontSize(15)
 Image(item.img)
 .width(40)
 .height(40)
 .objectFit(ImageFit.Auto)
 Text(item.temp)
 .fontColor(Color.White)
 .fontSize(15)
 }
 }

 })
}
.listDirection(Axis.Horizontal)
.margin({top:20})
.height(100)


紧接着是第三部分,未来五天天气

#HarmonyOS NEXT体验官#用鸿蒙实现天气展示效果​-鸿蒙开发者社区



首先我们使用Row容器给列表添加一个头

代码如下

Text('未来五天')
 .fontColor(Color.White)
 .fontSize(25)
 .fontWeight(600)
 .margin({top:40})
Row(){
日期")
 .fontColor(Color.White)
 .fontSize(15)

天气")
 .fontColor(Color.White)
 .fontSize(15)
高温")
 .fontColor(Color.White)
 .fontSize(15)

低温")
 .fontColor(Color.White)
 .fontSize(15)
}
.margin({top:20})
.padding({left:15,right:15})
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)

然后我们来实现列表部分代码如下

List({space:20}){
 ForEach(this.weatherObj.weatherList,(item:any)=>{

 ListItem(){
 Row(){
 Text(item.day)
 .fontColor(Color.White)
 .fontSize(15)

 Image(item.img)
 .width(40)
 .height(40)
 .objectFit(ImageFit.Auto)
 Text(item.max)
 .fontColor(Color.White)
 .fontSize(15)

 Text(item.min)
 .fontColor(Color.White)
 .fontSize(15)
 }
 .padding({left:15,right:15})
 .width('100%')
 .justifyContent(FlexAlign.SpaceBetween)

 }




 })
}
.listDirection(Axis.Vertical)
.margin({top:20})
.height('100%')
.layoutWeight(1)

有的人可能还看的意犹未尽,但到这里已经结束了

要知道,如果你使用的技术是安卓或者ios 半天时间你可能还在画页面,但是你现在掌握了鸿蒙开发技术,从创建项目到功能的实现,甚至不超过半个小时。这就是超过ios的第二大操作系统,其软件开发的便利性,可见一斑。不管是上手难度,还是开发难度,效率都大大提高。当真是恐怖如斯

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
收藏
回复
举报
回复
    相关推荐