当前位置：首页 > news >正文

Flutter 入门实战：构建一个简单的天气应用

news 2026/8/11 4:58:53

标题：Flutter 入门实战：构建一个简单的天气应用

引言

随着移动应用开发需求的不断增长，跨平台框架成为开发者关注的焦点。Flutter 作为 Google 推出的 UI 工具包，凭借高性能、高保真和“一次编写，多端运行”的优势，迅速在开发者社区中崛起。本文将带你从零开始，使用 Flutter 构建一个简单的天气应用，并结合实际代码演示核心概念。

一、环境准备

在开始前，请确保已安装以下工具：

Flutter SDK（推荐版本 3.19 或以上）
Dart SDK（随 Flutter 自动安装）
编辑器：VS Code 或 Android Studio
模拟器或真机用于调试

创建项目：

flutter create weather_appcdweather_app

二、项目结构概览

Flutter 项目的基本结构如下：

lib/ ├── main.dart # 应用入口 └── screens/ └── weather_screen.dart # 天气页面

我们将在main.dart中启动应用，并在weather_screen.dart中实现主要逻辑。

三、编写代码：实现一个简单天气界面

1.`main.dart`—— 应用入口

// lib/main.dartimport'package:flutter/material.dart';import'screens/weather_screen.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContext context){returnMaterialApp(title:'天气应用',theme:ThemeData(primarySwatch:Colors.blue,useMaterial3:true,),home:constWeatherScreen(),debugShowCheckedModeBanner:false,// 隐藏右上角 debug 标签);}}

2. 创建天气页面：`weather_screen.dart`

// lib/screens/weather_screen.dartimport'package:flutter/material.dart';classWeatherScreenextendsStatefulWidget{constWeatherScreen({super.key});@overrideState<WeatherScreen>createState()=>_WeatherScreenState();}class_WeatherScreenStateextendsState<WeatherScreen>{// 模拟天气数据String cityName="北京";int temperature=22;String description="晴朗";// 模拟刷新天气void_refreshWeather(){setState((){// 随机生成温度（15~30°C）temperature=(15+(15*Math.Random().nextDouble())).toInt();// 随机描述finaldescriptions=["晴朗","多云","小雨","阴天","雷阵雨"];description=descriptions[Random().nextInt(descriptions.length)];});}@overrideWidgetbuild(BuildContext context){returnScaffold(appBar:AppBar(title:constText("🌤️ 天气预报"),centerTitle:true,),body:Container(padding:constEdgeInsets.all(20),child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[// 城市名称Text(cityName,style:constTextStyle(fontSize:32,fontWeight:FontWeight.bold),),constSizedBox(height:20),// 温度Text('$temperature°C',style:constTextStyle(fontSize:64,color:Colors.orange),),constSizedBox(height:10),// 天气描述Text(description,style:constTextStyle(fontSize:20,color:Colors.grey),),constSizedBox(height:40),// 刷新按钮ElevatedButton.icon(onPressed:_refreshWeather,icon:constIcon(Icons.refresh),label:constText("更新天气"),style:ElevatedButton.styleFrom(padding:constEdgeInsets.symmetric(horizontal:30,vertical:15),),),],),),);}}

⚠️ 注意：请在文件顶部添加导入：
import'dart:math';

四、运行应用

在项目根目录运行以下命令：

flutter run

你将看到一个简洁美观的天气界面，点击“更新天气”按钮后，温度和天气描述会随机变化，得益于 Flutter 的热重载（Hot Reload），你可以在修改代码后几乎立即看到效果。

五、核心概念解析

Widget 架构
Flutter 中一切皆为 Widget。Scaffold提供页面骨架，AppBar是顶部栏，Column用于垂直布局。
状态管理（setState）
_refreshWeather方法中调用setState()，通知 Flutter 重新构建 UI，实现动态更新。
Material Design 组件
使用ElevatedButton、Text等 Material 风格组件，自动适配 Android 和 iOS 视觉规范。
布局与间距
SizedBox用于控制元素间距离，Padding和Center实现精准排版。