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

小黄要努力

发布于 2024-7-31 13:05

2370浏览

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℃"
 },
 ]
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

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

简单的布局组件 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)1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

然后是今日天气部分

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

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

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

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

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)1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.