写点什么

Flutter 实战 1 --- 写一个天气查询的 APP

用户头像
Android架构
关注
发布于: 20 小时前

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.@overrideWidget 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{@overrideState<StatefulWidget> createState() {// TODO: implement createStatereturn new WeatherState();}}


class WeatherState extends State<WeatherWidget>{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold();}


}


创建完后,在main.dart中将home改为WeatherWidget,如下:


class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: WeatherWidget(),);}

4.2 HotReload

在写 UI 的工程中,我们可以用到 Flutter 的 hot reload 的特性,写布局的时候,按ctrl+scmd+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: trueassets:


  • images/

4.4 写 WeatherWidget 的 UI 布局

Scaffold中添加body的属性,来写 UI 的布局,如下:


class WeatherState extends State<WeatherWidget>{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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.2http: ^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; //湿度


Weather


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


Data({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>{

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Flutter实战1 --- 写一个天气查询的APP