Flutter入门并开发天气预报APP(8)——天气预报第二步-选择省、市、区界面及网络请求

项目Github地址：a1203991686/CoolWeather_Flutter

在第六章中我们写了天气预报的页面， 但是你作为天气预报肯定能选择城市吧。所以我们现在来写选择省、市、区的界面。

我们使用的是郭霖大神在第一行代码最后面酷欧天气的API。

1. 实现界面

既然是一个选择省市区的界面，那么我们就用ListView。

首先看一下大致界面：

就直接使用ListView的builder()方法，忘了的同学可以看前面第5章。

省

在view文件夹下新建一个类provinces_page.dart，接下来就在这个文件里面写代码：

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

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

class ProvincesPageStateWidget extends State<ProvincesPageWidget> {
   
    @override
    Widget build(BuildContext context) {
   
        return Scaffold(
            appBar: new AppBar(
                title: Text(
                    "省份",
                    style: TextStyle(fontSize: 25.0),
                ),
            ),
            body: ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
   
                    return ListTile(
                            title: Text("$index"),
                    );
                },
            ),
        );
    }
}

市

和省一样。在view文件夹下新建一个类city_page.dart，接下来就在这个文件里面写代码。照着省的依葫芦画瓢，写一个ListView。

区

和省一样。在view文件夹下新建一个类counties_page.dart，接下来就在这个文件里面写代码。照着省的依葫芦画瓢，写一个ListView。

2. 网络请求

网络请求可以看下之前第7章的内容。主要是通过Dio进行网络请求。大家可以看下第7章网络请求的内容。

我们网络请求主要需要以下几个API：

• 请求省份列表：http://guolin.tech/api/china
• 请求对应市列表：http://guolin.tech/api/china/provinceID
• 请求对应区县列表：http://guolin.tech/api/china/provinceID/cityID

由于我们在之前文章中使用的省作为例子，这块我们就用区县作为例子：

转为Dart类

首先使用网站https://caijinglong.github.io/json2dart/来讲Json数据转为Dart实体类：

然后在项目lib目录新建一个文件夹。名为bean。这个文件夹主要存放实体类的代码。然后在这个文件夹下面新建一个dart文件，命名为Counties。然后把生成的Dart代码复制粘贴进去。但是你会发现复制进去后会报错，这个不用急，接下来我们来处理错误。

生成.g.dart文件

接下来在项目根目录的pubspec.yaml文件的dependencies项下面添加依赖json_annotation、dev_dependencies项下面添加build_runner和json_serializable。

接着打开终端，定位到项目根目录，输入
flutter packages pub run build_runner build，运行即可。运行完毕你就会发现你项目的存实体类的lib/bean目录多了一个文件，名为Counties.g.dart。同时你Counties.dart里面的错误也没有了。

网络请求

最后你就可以通过Dio来进行网络请求了。

Dio().get