查询天气项目会遇到的问题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本篇文章主要记录在编写天气查询项目时遇到的问题

---

一、如何将页面城市变化时，表头的城市也跟着变化（即黑色的和棕色城市一起改变）？

如图展示：

1.解决过程：

根据城市编号，调用getWeather方法，然后用所需要的集合进行接受，最后得到需要取得的结果
比如需要城市名字：cityName=result[i].forecasts[0].city
除此之外，当滑动时需要获取城市名称的编号

.onChange((index:number)=>{
  this.cityIndex=index
})

因为直接影响该行代码

Text(this.cityNameList[this.cityIndex])

这样就可以根据名称的编号再对棕色城市进行改变
添加索引

.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj=>obj===cityWeather)))

二、将近期的天气栏中的天气数据转化为图标并添加虚线

1.如图将近期的天气状况用数据表示出来

那么我们想将数据转化成图标，并将天气之间用线隔开

2.数据转化成图标代码如下：

 Column() {
  Text("近期天气查询").fontSize(26).margin({ top: 30 })
   Row() {
    ForEach(this.casts, (cast: casts) => {
      Column() {
        Text(cast.date.substring(5))
      this.weartherImage(cast.dayweather)
        Text(cast.daytemp.toString())
        Line()
          .width(20)
          .height(80)
          .startPoint([10, 0])
          .endPoint([10, 70])
          .stroke(Color.Black)
          .strokeWidth(3)
          .strokeDashArray([10, 3])


        Text(cast.nighttemp.toString())
        this.weartherImage(cast.nightweather)
      }
      .width("20%")
      .height("90%")
    })
  }
  .width("80%")
  .height("60%")
  .backgroundColor("#ffbab8b8")
  .opacity(0.5)
  .justifyContent(FlexAlign.SpaceAround)

}
.width("100%")
.height("45%")

3.天气之间用线隔开的代码：

@Builder weartherImage(weather:string){
   if (weather=== "晴")
    Image($r('app.media.sun')).width(30)

    if (weather === "阴")
      Image($r('app.media.cloud')).width(30)
    if (weather === "多云")
      Image($r('app.media.cloud')).width(30)
    if (weather .includes("雨") )
      Image($r('app.media.rain')).width(30)
  }

三、最终效果图