Flutter入门并开发天气预报APP(6)——天气预报第一步-界面

经过前面的对于Flutter的介绍，我们现在已经可以开始写我们的天气预报APP的界面了。

项目Github地址：a1203991686/CoolWeather_Flutter

1. 大致界面

最终写成的大致界面如图：

我们可以把这个界面拆分成如下部分：

可以看到我们APP主要有最上面用来显示地点和刷新时间的Title、显示温度和天气的两个Text、显示3天预报的ListView、显示空气质量的GridView、以及最后显示生活建议的ListView。

此处会用到我们前面学过的所有知识，如果有同学没有看过前面内容的，可以看下本系列前面的文章。

2. 创建项目

首先我们创建一个新的Flutter项目：

1. 在AndroidStudio点击File->New Flutter Project；
2. 接着选择Flutter Application->NEXT。接着填写你的项目名称等一系列信息后点击next；
   
3. 接着输入你的组织/公司名称作为包名，最后点击Finish即可，这样就新建了一个Flutter项目，并且Flutter会自动为你生成一个计数器Demo；
   
4. 让我们把mian.dart里面的所有注释以及_MyHomePageState里面的build方法里面的代码都删掉；
5. 接着在lib文件夹下新建一个文件夹，名叫view，到时候我们把所有与界面有关的代码文件都放在这个文件夹下面；
6. 然后我们在view文件夹下面新建一个dart文件，命名为main_page。这个就是我们的天气详情页。

3. 设计好天气详情页框架

首先我们需要导入material包，我们项目主要用material风格UI来写。

在开头输入import 'package:flutter/material.dart';，这样就导入了material包。接着创建我们的界面类MainPage。

由于我们在到时候写好网络请求后，所有的数据都得从网络获取，并且使用了异步的方法，也就是说我们先把页面加载了然后等获取的数据回来了在通知Flutter更新状态，所以这块我们得使用StatefulWidget。

class MainPage extends StatefulWidget {
   
  MainPage({
   Key key}) : super(key: key);

  @override
  MainPageState createState() => new MainPageState();
}

class MainPageState extends State<MainPage> {
   
  @override
  Widget build(BuildContext context) {
   
  
  }
}

接着我们就得开始写build()里面的内容了。由于我们需要一个全屏的背景图片，所以我们就使用Container作为我们最外层的Widget，并使用BoxDecoration装饰容器配合DecorationImage来放置图片：

@override
Widget build(BuildContext context) {
   
  return Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: NetworkImage("http://blog.mrabit.com/bing/today"), //必应每日一图背景
        fit: BoxFit.cover, // 设置为全屏
      ),
    ),
    child: _weatherBody(),
  );
}

这个时候我们的运行结果如图(①你背景图片多半和我不一样，因为上面那个Uri获取的是必应的每日一图，每天图片都不一样；②运行的时候记得把child: _weatherBody(),给注释掉，因为我们还没有定义_weatherBody()这个方法):

4. 设计title

为了方便我就直接把剩下的布局单领出来放到_weatherBody()这个方法:

Widget _weatherBody() {
   
  return
}

由于我们需要实现一个有Title的页面，所以最外层我选用了Scaffold：

Widget _weatherBody() {
   
  return Scaffold(
    backgroundColor: Colors.transparent, //背景透明
    appBar: AppBar(
      centerTitle: true,
      title: Text(
        "北京",
        style: TextStyle(fontSize: 25.0),
      ),
      backgroundColor: Colors.transparent, //背景透明
      actions: <Widget>[ //右侧Widget，相当于Android Toolbar中的menu
        Container(
          alignment: Alignment.center, //向中间对齐
          child<