查询天气中的添加按钮的实现

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

---

前言

首先你要把查询天气的项目主页的内容已经完成，这篇文章主要讲解的是添加城市列表的实现。添加城市列表的页面将会在另一篇文章中详细讲解

---

一、添加按钮

在主页面创建一个添加按钮，实现点击添加的时候，到添加页面。并添加完成

二、使用步骤

1.引入库

代码如下（示例）：

import getWeatherUtil from "../viewmodel/WeatherUtilModel"//需要自己写
import { WeatherModel } from "../viewmodel/WeatherModel"//需要自己写
import { cityView } from '../view/cityView'//需要自己写
import router from '@ohos.router'

以上需要写的，可以从作者的文章中找
本章只讲解添加和删除部分

2.主页面创建添加按钮

正确代码如下

Button("添加")
          .fontSize(25)
          .fontColor(Color.Gray)
          .opacity(0.7)
          .backgroundColor("#87CEEB")
          .margin({ bottom: 15 })
          .onClick(() => {
            router.pushUrl({
              url: "pages/AddCity",
              params: {
                Codes: this.cityCodeList,
                Names: this.cityNameList
              }
            })
          })

该代码仅仅实现如图的添加按钮

其中的url:"pages/AddCity"是要跳转的页面，即添加城市的页面。

3.添加城市的页面

以下是添加城市页面的代码

import router from '@ohos.router'
@Entry
@Component
struct AddCity {

@State AllCityCodeList :Array<number> = [110000,120000,130000,140000,210000,220000,310000]
@State AllCityNameList :Array<string> = ["北京市","天津市","河北省","山西省","辽宁省","吉林省","上海市"]

//当前城市代码列表 接收传入数据的载体
@State cityCodeList :Array<number> = []
@State cityNameList :Array<string> = []


onPageShow(){
  let params = router.getParams()
  this.cityCodeList = params["Codes"]
  this.cityNameList = params["Names"]
}
build() {
  //加入
  Column(){
    Row(){
      Text("添加城市列表").fontSize(35).fontColor(Color.White)
      Blank()
      Button("完成").backgroundColor("").fontSize(26)
        .onClick(()=>{
          router.back({
            url:"pages/Index",
            params:{
              Codes:this.cityCodeList
            }
          })
        })
    }.height("10%").width("95%")
    //城市列表
    Column() {
      List() {
        ForEach(this.AllCityNameList, (name: string) => {
          ListItem() {
            if (this.cityNameList.includes(name)) {
              Column() {
                Row() {
                  Text(name).fontSize(35).fontColor(Color.White).width("60%")
                    .margin({ top: 20, left: 30 })
                  Blank()
                  Text("已添加").backgroundColor("").fontSize(18)
                    .margin({ right: 5 })
                    .opacity(0.8)
                }.width("100%")

                Blank()
                Divider().strokeWidth(5)
              }.height(90).width("100%").margin({ top: 20 })
              .backgroundColor("#4682B4")
            } else {
              Column() {
                Row() {
                  Text(name).fontSize(35).fontColor(Color.White).width("60%")
                    .margin({ top: 20, left: 30 })
                  Blank()
                  Button("添加").backgroundColor("").fontSize(18)
                    .margin({ right: 5 })
                    .onClick(() => {
                      //根据name 获取所在索引
                      let index = this.AllCityNameList.findIndex(obj => obj === name)
                      console.log("index:"+index)
                      //根据索引获得 城市对应的编码
                      let cityCode: number = this.AllCityCodeList[index]
                      console.log("cityCode= "+cityCode)
                      //将编码加入列表
                      this.cityCodeList.push(cityCode)
                      this.cityNameList.push(name)
                      console.log(this.cityCodeList.toString())
                    })
                }.width("100%")

                Blank()
                Divider().strokeWidth(5)
              }.height(90).width("100%").margin({ top: 20 })
              .backgroundColor("#87CEEB")
            }


          }
        })
      }
    }.width("100%").height("90%")
  }.width("100%").height("100%").backgroundColor("#87CEFA")
}
}

成功实现后的效果图如下

可能遇到的问题
为什么添加完成之后不能返回了？
原因一：因为没有在完成按钮之后添加点击事件

Button("完成").backgroundColor("").fontSize(26)
  .onClick(()=>{
    router.back({
      url:"pages/Index",
      params:{
        Codes:this.cityCodeList
      }
    })
  })

原因二：数据传输时，出现了问题。比如完成按钮后的点击事件传的参数是Codes那么在主页面接收也应该是Codes
如以下代码：

onPageShow() {
  let params = router.getParams()
  if (params) {
    this.cityCodeList = params["Codes"]
    this.cityWeatherList = []
    this.cityNameList = []
    this.initData()
  }
}