前面一篇文章[Flutter实战1 写一个天气查询的APP]实现了一个显示城市、温度、天气、湿度的界面,但是这个界面只有一个显示的功能,没有任何可交互的地方,本篇文章继续完善查询天气的APP的功能。
先上效果图;
增加两个功能:
- 新增一个城市选择的页面
- 在城市选择页面,点击城市,跳转到对应城市天气的页面
1. 创建城市选择页面
在Android中新建一个页面,需要用Activity,在iOS中需要用ViewController,但在Flutter中,新建一个页面只需要用Widge就行,所以我们新建一个CityWidget.dart
,CityWidget
是一个ListView,从服务器拉取城市的列表并显示,我们用CityData.dart
来存储城市的数据。代码如下:
- CityData.dart
class CityData{
String cityName;
CityData(this.cityName);
}
- CityWidget.dart
CityWidget是一个StatefulWidget,因为CityWidget里的数据是从服务器上拉的,是变的&#