鸿蒙Harmony OS Next原生开发天气预报项目天气信息未来天气展示

鸿蒙初开,开天辟地

鸿蒙Harmony OS Next原生开发天气预报项目天气信息未来天气展示 

import { cityView } from '../view/cityView';
import getWeatherUtil from "../viewmodel/getWeatherUtil";
import { weatherModel } from '../viewmodel/weatherModel';
import { router } from '@kit.ArkUI';

@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.white .opacity1 .backgroundcolor006400 .margin bottom: 10left: 10>{
            router.pushUrl({
              url: "pages/AddCity",
              params: {
                codes: this.cityCodeList,
                names: this.cityNameList
              }
            });
          });
        Text(this.cityNameList[this.cityIndex])
          .fontSize(40)
          .fontColor("#333333"); // 深灰色字体
        Button("删除")
          .fontSize(25)
          .fontColor(Color.White) // 白色字体，确保对比度足够高
          .opacity(1) // 完全不透明
          .backgroundColor("#FF0000") // 红色背景
          .margin({ bottom: 10,right: 10 });
      }.width("100%").height("10%").justifyContent(FlexAlign.SpaceBetween);
      Tabs({barPosition:BarPosition.Start,controller:this.tabController}){
        ForEach(this.cityWeatherList,(cityWeather:weatherModel)=>{
          TabContent(){
            cityView({casts:cityWeather.forecasts[0].casts});
          }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj=>obj===cityWeather)));
        });
      }.barWidth(20).barHeight(30).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';
import { router } from '@kit.ArkUI';

@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.white .opacity1 .backgroundcolor006400 .margin bottom: 10left: 10>{
            router.pushUrl({
              url: "pages/AddCity",
              params: {
                codes: this.cityCodeList,
                names: this.cityNameList
              }
            });
          });
        Text(this.cityNameList[this.cityIndex])
          .fontSize(40)
          .fontColor("#333333"); // 深灰色字体
        Button("删除")
          .fontSize(25)
          .fontColor(Color.White) // 白色字体，确保对比度足够高
          .opacity(1) // 完全不透明
          .backgroundColor("#FF0000") // 红色背景
          .margin({ bottom: 10,right: 10 });
      }.width("100%").height("10%").justifyContent(FlexAlign.SpaceBetween);
      Tabs({barPosition:BarPosition.Start,controller:this.tabController}){
        ForEach(this.cityWeatherList,(cityWeather:weatherModel)=>{
          TabContent(){
            cityView({casts:cityWeather.forecasts[0].casts});
          }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj=>obj===cityWeather)));
        });
      }.barWidth(20).barHeight(30).onChange((index:number)=>{
        this.cityIndex = index;
      });
    }.width("100%").height("100%").backgroundColor("#87CEEB");
  }
}

@Entry
@Component
struct AddCity {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('AddCityHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

@Entry
@Component
struct AddCity {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('AddCityHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

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

@Component
export struct cityView{
  // 获取数据,城市数据
  casts:Array = [];
  @Builder weatherImage(weather:string,width:number,height:number){
    if(weather === "晴"){
      Image("https://i-blog.csdnimg.cn/direct/bf01538113ef4f218fd4495c430e0568.jpeg")
        .width(width).height(height);
    }
    if(weather === "阴"){
      Image("https://i-blog.csdnimg.cn/direct/cdccb8075bb8473db2672bed70190ba7.jpeg")
        .width(width).height(height);
    }
    if(weather === "多云"){
      Image("https://i-blog.csdnimg.cn/direct/cc6430c2542b4f49b98d33bac2005829.jpeg")
        .width(width).height(height);
    }
    if(weather.includes("雨")){
      Image("https://i-blog.csdnimg.cn/direct/de1260f193c446e7a1e9468140997ae2.jpeg")
        .width(width).height(height);
    }
  }
  // 展示数据
  build() {
    Column(){
      // 当天天气数据
      ForEach(this.casts,(cast:cast)=>{
        if(this.casts[0] === cast){
          // 图片渲染
          this.weatherImage(cast.dayweather,260,200)
          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:15});
          Column(){
            Text("近期天气").fontSize(26).margin({top:10});
            Row(){
              // 遍历天气
              ForEach(this.casts,(cast:cast)=>{
                Column(){
                  Text(cast.date.substring(5));
                  this.weatherImage(cast.dayweather,20,20);
                  Text(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.weatherImage(cast.nightweather,20,20);
                  Text(cast.nightweather);
                }.width("20%").height("90%");
              });
            }.width("80%").height("60%")
            .backgroundColor("#ffbab8b8")
            .opacity(0.5)
            .justifyContent(FlexAlign.SpaceAround);
          }.width("100%").height("55%");
        }
      });
    }.width("100%").height("100%");
  }
}

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

@Component
export struct cityView{
  // 获取数据,城市数据
  casts:Array = [];
  @Builder weatherImage(weather:string,width:number,height:number){
    if(weather === "晴"){
      Image("https://i-blog.csdnimg.cn/direct/bf01538113ef4f218fd4495c430e0568.jpeg")
        .width(width).height(height);
    }
    if(weather === "阴"){
      Image("https://i-blog.csdnimg.cn/direct/cdccb8075bb8473db2672bed70190ba7.jpeg")
        .width(width).height(height);
    }
    if(weather === "多云"){
      Image("https://i-blog.csdnimg.cn/direct/cc6430c2542b4f49b98d33bac2005829.jpeg")
        .width(width).height(height);
    }
    if(weather.includes("雨")){
      Image("https://i-blog.csdnimg.cn/direct/de1260f193c446e7a1e9468140997ae2.jpeg")
        .width(width).height(height);
    }
  }
  // 展示数据
  build() {
    Column(){
      // 当天天气数据
      ForEach(this.casts,(cast:cast)=>{
        if(this.casts[0] === cast){
          // 图片渲染
          this.weatherImage(cast.dayweather,260,200)
          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:15});
          Column(){
            Text("近期天气").fontSize(26).margin({top:10});
            Row(){
              // 遍历天气
              ForEach(this.casts,(cast:cast)=>{
                Column(){
                  Text(cast.date.substring(5));
                  this.weatherImage(cast.dayweather,20,20);
                  Text(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.weatherImage(cast.nightweather,20,20);
                  Text(cast.nightweather);
                }.width("20%").height("90%");
              });
            }.width("80%").height("60%")
            .backgroundColor("#ffbab8b8")
            .opacity(0.5)
            .justifyContent(FlexAlign.SpaceAround);
          }.width("100%").height("55%");
        }
      });
    }.width("100%").height("100%");
  }
}

效果一览