39城市选择页面实现.pdfVIP

城市选择⻚⾯实现 点击热映⻚⾯的左上⻆的城市，会跳转到城市选择⻚⾯： 本节就实现这个功能，这⾥涉 到两个知识点： 1. ⾸先就是实现城市选择⻚⾯ 2. 另⼀个就是⻚⾯跳转，Flutter 实现⻚⾯跳转需要⽤到 Route，也就是路由。 新建⽂件 CitysWidget.dart ⾸先实现城市选择⻚⾯，新建⼀个⽂件 CitysWidget.dart，在⾥⾯ 创建类 CitysWidget，注意，新的⻚⾯必须使⽤ Scaffold 作为 根 Widget ： import 'package:flutter/material.dart'; class CitysWidget extends StatefulWidget { @override State StatefulWidget> createState() { // TODO: implement createState return CityWidgtState(); } } class CityWidgtState extends State CitysWidget> { @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( body : Text('城市选择'), ); } } 这⾥返回的是⼀个 Text，先不急着实现⻚⾯，⽽是先实现⻚⾯跳转 功能，当⻚⾯跳转功能实现后，在去实现⻚⾯，因为这样就可以⽤ HotReload 实时看到⻚⾯的效果。 Route 接下来实现 Route，给 main.dart 的 MaterialApp 增加⼀个 routes 属性： routes: { '/Citys': (context) => CitysWidget(), }, MaterialApp 就变成: return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: '⾖瓣电影'), routes: { '/Citys': (context) => CitysWidget(), }, ); Navigator 然后给热映⻚⾯左上⻆的城市添加点击事件，调⽤ Na igator 跳转 到城市选择⻚⾯： GestureDetector( child: Text( '深圳', style: TextStyle(fontSize: 16), ), onTap: (){ Navigator.pushNamed(context, '/Citys'); }, ), 新建变量来存储当前城市的数据 新建⼀个 String 变量 curCity 来存储当前城市的数据，并且默认 值设为 深圳: class HotWidgetState extends State HotWidget> { String curCity = '深圳';//⽤变量来存储当前的城市 ... } 然后其余⽤ 深圳 的地⽅都替换成 curCity： GestureDetector( child: Text( curCity, style: TextStyle(fontSize: 16), ), onTap: (){ Navigator.pushNamed(context, '/Citys'); }, ), 同时要对 HotMo iesListWidget 进⾏重构，因为 HotMo iesListWidget ⾥的城市是写死的，现在需要将城市的数据 通过参数传递过去，给 HotMo iesListWidget 的构造函数添加城市 的参数，HotMoviesListWidget.dart 会变为： class HotMoviesListWidget extends StatefulWidget { String curCity ; HotMoviesListWidget(String city){ curCity = cit