使用Flutter编写应用（四）

前言

前面分享了天气详情页与城市列表页，但是它们目前还是相对独立的，也就是没有任何的数据传递与之间的切换。本文将分享如何将它们连接起来，实现页面间的跳转与数据传递。

开始

1.页面跳转

a.定义路由名字

在MaterialApp中定义routes：

routes: {
  "weather": (BuildContext context) => WeatherWidget(),
  "city": (BuildContext context) => CityWidget()
}

通过预定名进行跳转：

Navigator.pushNamed(context, "weather");

这样便可根据参数（weather）跳转到WeatherWidget页面，但此种方式无法进行页面之间传参。

b.自定义构建路由

Navigator.push<String>(context,
    MaterialPageRoute(builder: (context) => WeatherWidget("cityName")))

c.路由页面返回值与接收

//返回到上个页面并携带数据
Navigator.pop(context,"携带的数据");

//接收页面返回携带的数据then方法
 Navigator.push<String>(context,MaterialPageRoute(builder: (context) => WeatherWidget(cityList[index].name)))
.then((String value) {
    //接收返回的数据
});

2.给列表添加每个条目的点击事件

在ListTile中添加onTap属性：

ListTile(
           ......//内容
            onTap: () {
              //命名路由
              // Navigator.pushNamed(context, "weather");
              //自定义构建路由
              Navigator.push<String>(context,
                  MaterialPageRoute(builder: (context) => WeatherWidget(cityList[index].name)))
                  .then((String value) {
                //接收返回的数据
              });
            },
          );

给WeatherWidget和WeatherState添加一个变量并且通过其构造函数进行初始化。

#WeatherWidget
WeatherWidget(this._cityName);

#WeatherState
WeatherState(this._cityName) {
    _getWeatherData();
    _getNotesData();
  }

然后请求天气的参数和显示城市对应改成_cityName，这样便实现了实时查看点击的城市的天气。

结语

以上便实现了从城市列表页跳转到天气详情页，并且传递城市名字，然后根据具体的城市名字获取对应的天气情况。