- 1、本文档共19页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
城市选择⻚⾯实现
点击热映⻚⾯的左上⻆的城市,会跳转到城市选择⻚⾯:
本节就实现这个功能,这⾥涉 到两个知识点:
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 = city;
}
...
}
class
您可能关注的文档
- IICA通信例程说明文档.pdf
- 一、K3 Cloud实施初始化——安装部署实施篇.pdf
- 淘宝技术架构分享.pdf
- 超声波测距例程说明文档.pdf
- 流程设计用户场景-Jajas.pdf
- SPI通信例程说明文档.pdf
- 华为认证HCNA-Cloud云计算(H13-511)题库.pdf
- 智慧硬件_智慧应用平台打造智慧景区_.pdf
- Flutter 完全手册 - 小德_REN - 掘金小册51.pdf
- 信息架构作业——Della伶俐.pdf
- 四川省德阳市罗江中学2025届高三考前热身化学试卷含解析.doc
- 山东省枣庄现代实验学校2025届高三下学期第五次调研考试化学试题含解析.doc
- 吉林省长春市十一高中等九校教育联盟2025届高三一诊考试生物试卷含解析.doc
- 2025届江苏省盐城市伍佑中学高考仿真模拟化学试卷含解析.doc
- 2025届广西贺州中学高考冲刺押题(最后一卷)生物试卷含解析.doc
- 安徽省池州市贵池区2025届高三第一次模拟考试生物试卷含解析.doc
- 宁夏银川一中2025届高三(最后冲刺)化学试卷含解析.doc
- 广东省广州市增城区四校联考2025届高考压轴卷化学试卷含解析.doc
- 2025届邯郸市第一中学高考生物必刷试卷含解析.doc
- 2025届安徽省安庆市石化第一中学高考仿真卷化学试卷含解析.doc
文档评论(0)