鸿蒙Harmony OS Next原生开发天气预报项目主页面渲染构建

旧约Alatus

已于 2025-03-20 23:53:18 修改

阅读量117

点赞数 4

分类专栏： # Harmony鸿蒙移动端原生开发文章标签： harmonyos 华为鸿蒙系统鸿蒙华为snap mybatis jvm

于 2025-03-20 22:05:53 首次发布

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

版权

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

36 篇文章

订阅专栏

移动端原生开发

36 篇文章

订阅专栏

鸿蒙初开,开天辟地

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

@Entry
@Component
struct Index {
  // 城市代码集合
  @State cityCodeList:number[] = [110000,120000];
  // 城市名字集合
  @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(){
            Text(cityWeather.forecasts[0].city).fontSize(40);
          }.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 getWeatherUtil from "../viewmodel/getWeatherUtil";
import { weatherModel } from '../viewmodel/weatherModel';

@Entry
@Component
struct Index {
// 城市代码集合
@State cityCodeList:number[] = [110000,120000];
// 城市名字集合
@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(){
Text(cityWeather.forecasts[0].city).fontSize(40);
}.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");
}
}