提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
提示：这里可以添加本文要记录的大概内容：
本章内容是讲述天气页面及首页的内容。插入的图片将不放在内容里了，如果 读者需要，请私信给我
提示：以下是本篇文章正文内容，下面案例可供参考
一、首页
import getWeatherUtil from "../viewmodel/WeatherUtilModel"
import { WeatherModel } from "../viewmodel/WeatherModel"
import { cityView } from '../view/cityView'
import router from '@ohos.router'
@Entry
@Component
struct Index {
//城市信息集合
@State cityWeatherList: Array<WeatherModel> = []
//城市名字集合
@State cityNameList: Array<string> = []
//当前城市代码列表
@State cityCodeList: Array<number> = [110000,120000]
//当前tab组件索引
@State cityIndex: number = 0
//tab控制器
tabcontroller: TabsController = new TabsController()
onPageShow() {
let params = router.getParams()
if (params) {
this.cityCodeList = params["Codes"]
this.cityWeatherList = []
this.cityNameList = []
this.initData()
}
}
//tarBar 自定义函数
@Builder tabBuild(index: number) {
Circle({ width: 10, height: 10 }).fill(this.cityIndex === index ? Color.White : Color.Gray).opacity(0.4)
}
aboutToAppear() {
this.initData()
}
async initData() {
//所有数据的集合
let result :Array<WeatherModel> = await getWeatherUtil.getWeathers(this.cityCodeList)
for (let i = 0; i < result.length; i++) {
let ACityWeather = new WeatherModel();
ACityWeather = result[i]
this.cityWeatherList.push(ACityWeather)
let cityName = this.cityWeatherList[i].forecasts[0].city
this.cityNameList.push(cityName)
}
}
build() {
Stack(){
Image($r('app.media.backgroud'))
.width("100%")
.height("100%")
.opacity(0.5) // 根据需要调整透明度
Column() {
//城市选择+城市标题
Row() {
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
}
})
})
Text(this.cityNameList[this.cityIndex]).fontSize(40).fontColor(Color.Orange)
Button("删除")
.fontSize(25)
.fontColor(Color.Gray)
.opacity(0.7)
.backgroundColor("#87CEEB")
.margin({ bottom: 15 })
.onClick(() => {
AlertDialog.show({ title: "删除",
message: `你确定要删除${this.cityNameList[this.cityIndex]}消息吗？`,
confirm: {
value: "确定",
action: () => {
this.cityNameList = this.cityNameList.filter(item => item !== this.cityNameList[this.cityIndex])
this.cityCodeList = this.cityCodeList.filter(item => item !== this.cityCodeList[this.cityIndex])
this.cityWeatherList = this.cityWeatherList.filter(item => item !== this.cityWeatherList[this.cityIndex])
}
}
})
})
}.height("10%")
.width("100%")
.justifyContent(FlexAlign.SpaceBetween)
//城市切换
Tabs({ barPosition: BarPosition.Start, controller: this.tabcontroller }) {
ForEach(this.cityWeatherList, (cityWeatherList: WeatherModel) => {
TabContent() {
cityView({ casts: cityWeatherList.forecasts[0].casts })
}.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj => obj === cityWeatherList)))
})
}
.barHeight(20)
.barWidth(40)
.onChange((index: number) => {
this.cityIndex = index
})
}
.width("100%")
.height("100%")
}.backgroundColor("#87CEEB")
.width("100%").height("100%")
}
}
二、天气显示页面
1.天气对应图片的函数
@Builder weatherImage(dayweather: string) {
if (dayweather === "晴") {
Image($r('app.media.sun')).width(30)
}
if (dayweather === "多云") {
Image($r("app.media.cloud")).width(30)
}
if (dayweather === "阴") {
Image($r("app.media.cloud")).width(30)
}
if (dayweather.includes("雨")) {
Image($r("app.media.rain")).width(30)
}
if (dayweather.includes("沙")) {
Image($r("app.media.sand")).width(30)
}
}
2.近期天气卡片
Text("查看近期天气").fontSize(26).margin({ top: 30 })
//天气列表
Row() {
ForEach(this.casts, (cast: casts) => {
Column() {
Text(cast.date.substring(5))
this.weatherImage(cast.dayweather)
Blank()
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() + "°")
Blank()
this.weatherImage(cast.dayweather)
}.height("90%").width("20%")
})
}
.width("100%")
.height("40%")
.backgroundColor("#ffbab8b8")
.opacity(0.5)
.justifyContent(FlexAlign.SpaceAround)
.padding({left:15,right:15})
.margin({bottom:35})
3.风力风向的卡片
Text("风向风力").fontSize(26).margin({ top: 30 })
Row() {
ForEach(this.casts, (cast: casts, index: number) => {
// 风向风力内容
Column() {
Row() {
Image($r("app.media.wind")) // 假设 'app.media.wind' 是风力的图片资源
.width(120) // 设置图片宽度
.height(100) // 设置图片高度
.margin({ right: 35 }) // 设置图片与右边距
Image($r("app.media.w2")) // 假设 'app.media.wind' 是风力的图片资源
.width(120) // 设置图片宽度
.height(100) // 设置图片高度
.margin({ right: 35 })
}
.width("100%")
Text("风向：" + cast.daywind)
.fontSize(24)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.margin({ right: 20 }) // 右边距，根据需要调整
Text("风力：" + cast.daypower)
.fontSize(24)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.margin({ right: 20 })
}.margin({ top: 10 })
天气显示的总代码
import { casts } from "../viewmodel/casts"
import url from '@ohos.url'
@Component
export struct cityView {
//当前城市天气
casts: casts[] = []
@Builder weatherImage(dayweather: string) {
if (dayweather === "晴") {
Image($r('app.media.sun')).width(30)
}
if (dayweather === "多云") {
Image($r("app.media.cloud")).width(30)
}
if (dayweather === "阴") {
Image($r("app.media.cloud")).width(30)
}
if (dayweather.includes("雨")) {
Image($r("app.media.rain")).width(30)
}
if (dayweather.includes("沙")) {
Image($r("app.media.sand")).width(30)
}
}
build() {
//单个tabcontent 展示的所有内容
Column() {
ForEach(this.casts, (cast: casts) => {
if (cast === this.casts[0]) {
//上半部分 图片+当天天气
//图片
Row() {
if (cast.dayweather === "晴") {
Image($r('app.media.sun')).width(260)
}
if (cast.dayweather === "多云") {
Image($r("app.media.cloud")).width(260)
}
if (cast.dayweather === "阴") {
Image($r("app.media.cloud")).width(260)
}
if (cast.dayweather.includes("雨")) {
Image($r("app.media.rain")).width(260)
}
if (cast.dayweather.includes("沙")) {
Image($r("app.media.sand")).width(260)
}
}.height("30%")
Column() {
//天气 温度
Row() {
Text(cast.dayweather).fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
Text(" " + cast.daytemp + "°~" + cast.nighttemp + "°")
.fontSize(30)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
}
//风力 等级
Row() {
Text(cast.daywind + "风 ").fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
Text(cast.daypower + "级").fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
}
}.margin({ top: 10 })
}
})
List() {
ForEach(this.casts, (cast: casts, index: number) => {
ListItem() {
//近期天气列表
Column() {
Text("查看近期天气").fontSize(26).margin({ top: 30 })
//天气列表
Row() {
ForEach(this.casts, (cast: casts) => {
Column() {
Text(cast.date.substring(5))
this.weatherImage(cast.dayweather)
Blank()
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() + "°")
Blank()
this.weatherImage(cast.dayweather)
}.height("90%").width("20%")
})
}
.width("100%")
.height("40%")
.backgroundColor("#ffbab8b8")
.opacity(0.5)
.justifyContent(FlexAlign.SpaceAround)
.padding({left:15,right:15})
.margin({bottom:35})
Text("风向风力").fontSize(26).margin({ top: 30 })
Row() {
ForEach(this.casts, (cast: casts, index: number) => {
// 风向风力内容
Column() {
Row() {
Image($r("app.media.wind")) // 假设 'app.media.wind' 是风力的图片资源
.width(120) // 设置图片宽度
.height(100) // 设置图片高度
.margin({ right: 35 }) // 设置图片与右边距
Image($r("app.media.w2")) // 假设 'app.media.wind' 是风力的图片资源
.width(120) // 设置图片宽度
.height(100) // 设置图片高度
.margin({ right: 35 })
}
.width("100%")
Text("风向：" + cast.daywind)
.fontSize(24)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.margin({ right: 20 }) // 右边距，根据需要调整
Text("风力：" + cast.daypower)
.fontSize(24)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.margin({ right: 20 })
}.margin({ top: 10 })
// 根据需要添加分隔线或间距
if (index !== this.casts.length - 1) {
Line().width("100%").height(1).stroke(Color.Black).strokeWidth(1)
}
})
}
.width("100%")
.height("45%")
.backgroundColor("#ffbab8b8")
.opacity(0.5)
.justifyContent(FlexAlign.SpaceAround)
}
}
})
}
.width("90%").height("80%")
}
.width("100%")
.height("100%")
}}
1061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
