内容简介:在Android Studio中,创建完工程后,有三个目录
在Android Studio中, File
-> New
-> New Flutter Project
-> Flutter Application
创建完工程后,有三个目录
android
:Android工程的目录
ios
:iOS工程的目录
lib
: Flutter工程的目录
其中android、ios下的文件我们都不动,我们只改动lib目录下的dart文件。
2.运行Flutter工程
- 连接手机
- 这里不建议用模拟器,因为模拟器在用GPU渲染时可能会出问题,导致图片渲染不出来。
-
然后按
Run
在手机上把程序跑起来。
3.天气API接口申请
注册地址 console.heweather.com/register
注册完后,再看API文档 www.heweather.com/documents
demo这里用的是,获取当天天气情况的API: www.heweather.com/documents/a…
用的请求URL如下:
https://free-api.heweather.com/s6/weather/now?location=广州&key=****** 复制代码
4.界面编写
在创建的工程里,有个 main.dart
里面有一段显示界面的代码如下:
class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in a Flutter IDE). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } 复制代码
其中 home
就是要显示的界面,这里我们要把 MyHomePage
换成我们自己的。
4.1 创建WeatherWidget
通过 new
-> Dart File
在lib目录下创建WeatherWidget
class WeatherWidget extends StatefulWidget{ @override State<StatefulWidget> createState() { // TODO: implement createState return new WeatherState(); } } class WeatherState extends State<WeatherWidget>{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( ); } } 复制代码
创建完后,在 main.dart
中将 home
改为 WeatherWidget
,如下:
class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: WeatherWidget(), ); } 复制代码
4.2 HotReload
在写UI的工程中,我们可以用到Flutter的hot reload的特性,写布局的时候,按 ctrl+s
或 cmd+s
就可以在手机上实时看到界面的变化。
这个功能很好用。
4.3添加图片资源
Flutter可以添加不同的资源,例如图片、文本、配置文件、静态数据等。
添加资源时,需要在 pubspec.yaml
文件中的 flutter
属性下添加 assets
,并标明要添加资源的路径,例如,我们要加入指定的图片时,可以这么写:
flutter: assets: - assets/my_icon.png - assets/background.png 复制代码
如果要添加的资源太多,也可以添加文件夹,例如:
flutter: assets: - assets/ 复制代码
在本demo中,要添加一个背景图,我们在工程的根目录下创建 images
目录,将背景图放在 images
目录下,然后在 pubspec.yaml
中添加:
flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true assets: - images/ 复制代码
4.4 写WeatherWidget的UI布局
在 Scaffold
中添加 body
的属性,来写UI的布局,如下:
class WeatherState extends State<WeatherWidget>{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( body: new Stack( fit: StackFit.expand, children: <Widget>[ new Image.asset("images/weather_bg.jpg",fit: BoxFit.fitHeight,), new Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ new Container( width: double.infinity, margin: EdgeInsets.only(top: 40.0), child: new Text( "广州市", textAlign: TextAlign.center, style: new TextStyle( color: Colors.white, fontSize: 30.0, ), ), ), new Container( width: double.infinity, margin: EdgeInsets.only(top: 100.0), child: new Column( children: <Widget>[ new Text( "20 °", style: new TextStyle( color: Colors.white, fontSize: 80.0 )), new Text( "晴", style: new TextStyle( color: Colors.white, fontSize: 45.0 )), new Text( "湿度 80%", style: new TextStyle( color: Colors.white, fontSize: 30.0 ), ) ], ), ) ], ) ], ), ); } } 复制代码
按 ctrl+s
,在手机上就可以看到写好的UI,但这时候的数据是写死的,下来看如何通过http获取数据。
5.通过http获取数据
要通过http数据,我们首先要添加http的依赖库,在 pubspec.yaml
中的 dependencies
添加如下:
dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 http: ^0.12.0 复制代码
然后在当前工程目录下运行以下命令行:
$ flutter packages get 复制代码
或者在Android Stuido 打开 pubspec.yaml
文件,点击上面的 packages get
这里操作的意义是,拉取http的库。
5.1 创建WeatherData类
通过 new
-> Dart File
在lib目录下创建WeatherData
class WeatherData{ String cond; //天气 String tmp; //温度 String hum; //湿度 WeatherData({this.cond, this.tmp, this.hum}); factory WeatherData.fromJson(Map<String, dynamic> json) { return WeatherData( cond: json['HeWeather6'][0]['now']['cond_txt'], tmp: json['HeWeather6'][0]['now']['tmp']+"°", hum: "湿度 "+json['HeWeather6'][0]['now']['hum']+"%", ); } factory WeatherData.empty() { return WeatherData( cond: "", tmp: "", hum: "", ); } } 复制代码
5.2 数据获取
class WeatherState extends State<WeatherWidget>{ WeatherData weather = WeatherData.empty(); WeatherState(){ _getWeather(); } void _getWeather() async{ WeatherData data = await _fetchWeather(); setState((){ weather = data; }); } Future<WeatherData> _fetchWeather() async{ final response = await http.get('https://free-api.heweather.com/s6/weather/now?location=广州&key=ebb698e9bb6844199e6fd23cbb9a77c5'); if(response.statusCode == 200){ return WeatherData.fromJson(json.decode(response.body)); }else{ return WeatherData.empty(); } } @override Widget build(BuildContext context) { ... } } 复制代码
5.3 将之前写死的数据换成WeatherData
... child: new Column( children: <Widget>[ new Text( weather?.tmp, style: new TextStyle( color: Colors.white, fontSize: 80.0 )), new Text( weather?.cond, style: new TextStyle( color: Colors.white, fontSize: 45.0 )), new Text( weather?.hum, style: new TextStyle( color: Colors.white, fontSize: 30.0 ), ) ], ), ... 复制代码
以上所述就是小编给大家介绍的《Flutter实战1 --- 写一个天气查询的APP》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Flutter实战2 --- 写一个天气查询的APP
- Flutter实战4 -- 天气查询APP重构之状态管理(InheritedWidget)
- Flutter实战5 -- 天气查询APP重构之状态管理(ScopedModel)
- Python学习笔记(六)——查询天气脚本
- 「Flask实战」鱼书项目实战一
- 「Flask实战」鱼书项目实战三
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python语言程序设计
[美]梁勇(Lang Y. D.) / 李娜 / 机械工业出版社 / 2015-4 / 79.00元
本书采用“问题驱动”、“基础先行”和“实例和实践相结合”的方式,讲述如何使用Python语言进行程序设计。本书首先介绍Python程序设计的基本概念,接着介绍面向对象程序设计方法,最后介绍算法与数据结构方面的内容。为了帮助学生更好地掌握相关知识,本书每章都包括以下模块:学习目标,引言,关键点,检查点,问题,本章总结,测试题,编程题,注意、提示和警告。 本书可以作为高等院校计算机及相关专业Py......一起来看看 《Python语言程序设计》 这本书的介绍吧!