鸿蒙Harmony OS Next原生开发天气预报项目天气信息页面渲染

旧约Alatus

已于 2025-03-20 23:46:23 修改

阅读量123

点赞数 2

分类专栏： # Harmony鸿蒙移动端原生开发文章标签： harmonyos 华为搜索引擎 neo4j spring cloud spring kafka

于 2025-03-20 22:08:48 首次发布

本文链接：https://blog.youkuaiyun.com/2201_75960169/article/details/146407528

版权

Harmony鸿蒙同时被 2 个专栏收录

36 篇文章

订阅专栏

移动端原生开发

36 篇文章

订阅专栏

鸿蒙初开,开天辟地

鸿蒙Harmony OS Next原生开发天气预报项目天气信息页面渲染

import { cityView } from '../view/cityView';
import getWeatherUtil from "../viewmodel/getWeatherUtil";
import { weatherModel } from '../viewmodel/weatherModel';

@Entry
@Component
struct Index {
  // 城市代码集合
  @State cityCodeList:number[] = [440300,440100];
  // 城市名字集合
  @State cityNameList:string[] = [];
  // 城市信息集合
  @State cityWeatherList:Array = [];
  // 当前城市索引
  @State cityIndex:number = 0;
  tabController:TabsController = new TabsController();
  // 按钮样式
  @Builder tabBuild(index:number){
    Circle({width:10,height:10}).fill(this.cityIndex === index?Color.White:Color.Gray).opacity(0.4);
  }
  // 获取数据
  aboutToAppear(): void {
    this.initDate();
  }
  // 初始化方法
  async initDate(){
    let result:Array = await getWeatherUtil.getWeathers(this.cityCodeList);
    for (let i = 0; i < result.length i let weather:weathermodel='result[i];' this.cityweatherlist.pushweather this.citynamelist.pushweather.forecasts0.city build column row button.fontsize25.fontcolorcolor.gray.opacity0.7.backgroundcolor87ceeb.marginbottom:15 textthis.citynamelistthis.cityindex.fontsize40.fontcolorcolor.orange button.fontsize25.fontcolorcolor.gray.opacity0.7.backgroundcolor87ceeb.marginbottom:15 .width100.height10.justifycontentflexalign.spacebetween tabsbarposition:barposition.startcontroller:this.tabcontroller>{
          TabContent(){
            cityView({casts:cityWeather.forecasts[0].casts});
          }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj=>obj===cityWeather)));
        });
      }.barWidth(20).barHeight(40).onChange((index:number)=>{
        this.cityIndex = index;
      });
    }.width("100%").height("100%").backgroundColor("#87CEEB");
  }
}
import { cityView } from '../view/cityView';
import getWeatherUtil from "../viewmodel/getWeatherUtil";
import { weatherModel } from '../viewmodel/weatherModel';

@Entry
@Component
struct Index {
// 城市代码集合
@State cityCodeList:number[] = [440300,440100];
// 城市名字集合
@State cityNameList:string[] = [];
// 城市信息集合
@State cityWeatherList:Array = [];
// 当前城市索引
@State cityIndex:number = 0;
tabController:TabsController = new TabsController();
// 按钮样式
@Builder tabBuild(index:number){
Circle({width:10,height:10}).fill(this.cityIndex === index?Color.White:Color.Gray).opacity(0.4);
}
// 获取数据
aboutToAppear(): void {
this.initDate();
}
// 初始化方法
async initDate(){
let result:Array = await getWeatherUtil.getWeathers(this.cityCodeList);
for (let i = 0; i < result.length i let weather:weathermodel='result[i];' this.cityweatherlist.pushweather this.citynamelist.pushweather.forecasts0.city build column row button.fontsize25.fontcolorcolor.gray.opacity0.7.backgroundcolor87ceeb.marginbottom:15 textthis.citynamelistthis.cityindex.fontsize40.fontcolorcolor.orange button.fontsize25.fontcolorcolor.gray.opacity0.7.backgroundcolor87ceeb.marginbottom:15 .width100.height10.justifycontentflexalign.spacebetween tabsbarposition:barposition.startcontroller:this.tabcontroller>{
TabContent(){
cityView({casts:cityWeather.forecasts[0].casts});
}.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj=>obj===cityWeather)));
});
}.barWidth(20).barHeight(40).onChange((index:number)=>{
this.cityIndex = index;
});
}.width("100%").height("100%").backgroundColor("#87CEEB");
}
}

import { cast } from '../viewmodel/cast';

@Component
export struct cityView{
  // 获取数据,城市数据
  casts:Array = [];
  // 展示数据
  build() {
    Column(){
      // 当天天气数据
      ForEach(this.casts,(cast:cast)=>{
        if(this.casts[0] === cast){
          // 图片渲染
          Row(){
            if(cast.dayweather === "晴"){
              Image("https://i-blog.csdnimg.cn/direct/bf01538113ef4f218fd4495c430e0568.jpeg")
                .width(260).height("100%");
            }
            if(cast.dayweather === "阴"){
              Image("https://i-blog.csdnimg.cn/direct/cdccb8075bb8473db2672bed70190ba7.jpeg")
                .width(260).height("100%");
            }
            if(cast.dayweather === "多云"){
              Image("https://i-blog.csdnimg.cn/direct/cc6430c2542b4f49b98d33bac2005829.jpeg")
                .width(260).height("100%");
            }
            if(cast.dayweather.includes("雨")){
              Image("https://i-blog.csdnimg.cn/direct/de1260f193c446e7a1e9468140997ae2.jpeg")
                .width(260).height("100%");
            }
          }.height("50%");
          Column(){
            // 气温,天气
            Text(`${cast.dayweather} ${cast.daytemp}° 至 ${cast.nighttemp}°`).fontSize(30)
              .fontColor(Color.White).fontWeight(FontWeight.Bold);
            Text(`${cast.daywind}风${cast.daypower}级`).fontSize(30)
              .fontColor(Color.White).fontWeight(FontWeight.Bold);
          }.margin({top:20});
          Column(){
            Text(`近期天气查询`).fontSize(26).margin({top:30})
          }.width("100%").height("45%");
        }
      });
    }.width("100%").height("100%");
  }
}
import { cast } from '../viewmodel/cast';

@Component
export struct cityView{
// 获取数据,城市数据
casts:Array = [];
// 展示数据
build() {
Column(){
// 当天天气数据
ForEach(this.casts,(cast:cast)=>{
if(this.casts[0] === cast){
// 图片渲染
Row(){
if(cast.dayweather === "晴"){
Image("https://i-blog.csdnimg.cn/direct/bf01538113ef4f218fd4495c430e0568.jpeg")
.width(260).height("100%");
}
if(cast.dayweather === "阴"){
Image("https://i-blog.csdnimg.cn/direct/cdccb8075bb8473db2672bed70190ba7.jpeg")
.width(260).height("100%");
}
if(cast.dayweather === "多云"){
Image("https://i-blog.csdnimg.cn/direct/cc6430c2542b4f49b98d33bac2005829.jpeg")
.width(260).height("100%");
}
if(cast.dayweather.includes("雨")){
Image("https://i-blog.csdnimg.cn/direct/de1260f193c446e7a1e9468140997ae2.jpeg")
.width(260).height("100%");
}
}.height("50%");
Column(){
// 气温,天气
Text(`${cast.dayweather} ${cast.daytemp}° 至 ${cast.nighttemp}°`).fontSize(30)
.fontColor(Color.White).fontWeight(FontWeight.Bold);
Text(`${cast.daywind}风${cast.daypower}级`).fontSize(30)
.fontColor(Color.White).fontWeight(FontWeight.Bold);
}.margin({top:20});
Column(){
Text(`近期天气查询`).fontSize(26).margin({top:30})
}.width("100%").height("45%");
}
});
}.width("100%").height("100%");
}
}

最终效果一览