提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
首先你要把查询天气的项目主页的内容已经完成,这篇文章主要讲解的是添加城市列表的实现。添加城市列表的页面将会在另一篇文章中详细讲解
一、添加按钮
在主页面创建一个添加按钮,实现点击添加的时候,到添加页面。并添加完成
二、使用步骤
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()
}
}