Flutter开发之——路由堆栈，应聘高级Android工程师历程感言
},
title: ‘Flutter Demo’,
theme: ThemeData(primarySwatch: Colors.blue,),
home: MyHomePage(title: ‘Flutter Demo Home Page’),
);
}
}
4.2 页面间跳转
4.2.1 pushNamed方式(M跳转B)
标准跳转方式，每次跳转都将页面假如到堆栈中
RaisedButton(
child: Text(‘M 页面’),
onPressed: () {
Navigator.of(context).pushNamed(’/B’);
},
)
4.2.2 pushReplacementNamed 方式
将要添加的页面堆栈替换当前堆栈
有A、B、C 三个页面，A页面通过 pushNamed 跳转到 B：
RaisedButton(
child: Text(‘M 页面’),
onPressed: () {
Navigator.of(context).pushNamed(’/B’);
},
)
通过 pushReplacementNamed 跳转到 C：
RaisedButton(
child: Text(‘B 页面’),
onPressed: () {
Navigator.of(context).pushReplacementNamed(’/C’);
},
)
点击 C 页面按钮执行 pop：
RaisedButton(
child: Text(‘C 页面’),
onPressed: () {
if(Navigator.of(context).canPop()){
Navigator.of(context).pop();
}
},
)
效果图
堆栈变化
点击 C 页面按钮直接返回到了 A 页面，而不是 B 页面，因为 B 页面使用 pushReplacementNamed 跳转，路由堆栈变化
4.2.3 popAndPushNamed
B 页面跳转到 C 页面，使用 popAndPushNamed
RaisedButton(
child: Text(‘B 页面’),
onPressed: () {
Navigator.of(context).popAndPushNamed(’/C’);
},
)
popAndPushNamed和pushReplacementNamed的区别
-
popAndPushNamed 路由堆栈和 pushReplacementNamed 是一样，唯一的区别就是
-
popAndPushNamed 有 B 页面退出动画
4.2.4 pushNamedAndRemoveUntil
应用场景
有如下场景，应用程序进入首页，点击登录进入登录页面，然后进入注册页面或者忘记密码页面…，登录成功后进入其他页面，此时不希望返回到登录相关页面，此场景可以使用
有A、B、C、D 四个页面，A 通过push进入 B 页面，B 通过push进入 C 页面，C 通过 pushNamedAndRemoveUntil 进入 D 页面同时删除路由堆栈中直到 /B 的路由，C 页面代码
RaisedButton(
child: Text(‘C 页面’),
onPressed: () {
Navigator.of(context).pushNamedAndRemoveUntil(’/D’, ModalRoute.withName(’/B’));
},
),
D 页面按钮执行 pop
RaisedButton(
child: Text(‘D 页面’),
onPressed: () {
Navigator.of(context).pop();
},
)
效果图
从 C 页面跳转到 D 页面路由堆栈变化
4.2.5 popUntil
有A、B、C、D 四个页面，D 页面通过 popUntil 一直返回到 A 页面，D 页面代码：
RaisedButton(
child: Text(‘D 页面’),
onPressed: () {
Navigator.of(context).popUntil(ModalRoute.withName(’/A’));
},
)
效果图
路由堆栈变化
5.1 通过构造函数方式
商品详情页
class ProductDetail extends StatelessWidget {
final ProductInfo productInfo;
const ProductDetail({Key key, this.productInfo}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
body: Container(
alignment: Alignment.center,
child: Text(“ProductDetail：${productInfo.name}”),
),
),
);
}
}
要传递的值
class ProductInfo {
var name;
ProductInfo(this.name);
}
跳转代码
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return ProductDetail(productInfo: ProductInfo(“张三”),);
}));
效果图
5.2 通过命名路由设置参数的方式
A 页面传递数据
RaisedButton(
child: Text(‘A 页面’),
onPressed: () {
Navigator.of(context).pushNamed(’/B’,arguments: ‘来自A’);
},
)
B 页面通过 ModalRoute.of(context).settings.arguments 接收数据：
RaisedButton(
child: Text(’${ModalRoute.of(context).settings.arguments}’),
onPressed: () {
Navigator.of(context).pushNamed(’/C’);
},
)
效果图
5.3 返回数据
B 页面返回代码
RaisedButton(
child: Text(’${ModalRoute.of(context).settings.arguments}’),
onPressed: () {
Navigator.of(context).pop(‘从B返回’);
},
)
A页面接收返回的数据
class _MyHomePageState extends State {
String _string = ‘A 页面’;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text(_string),
onPressed: () async{
var result = await Navigator.of(context).pushNamed(’/B’, arguments: ‘来自A’);
setState(() {
_string = result;
});
},
)
],
最后
以前一直是自己在网上东平西凑的找，找到的东西也是零零散散，很多时候都是看着看着就没了，时间浪费了，问题却还没得到解决，很让人抓狂。
后面我就自己整理了一套资料，还别说，真香！
资料有条理，有系统，还很全面，我不方便直接放出来，大家可以先看看有没有用得到的地方吧。
var result = await Navigator.of(context).pushNamed(’/B’, arguments: ‘来自A’);
setState(() {
_string = result;
});
},
)
],
最后
以前一直是自己在网上东平西凑的找，找到的东西也是零零散散，很多时候都是看着看着就没了，时间浪费了，问题却还没得到解决，很让人抓狂。
后面我就自己整理了一套资料，还别说，真香！
资料有条理，有系统，还很全面，我不方便直接放出来，大家可以先看看有没有用得到的地方吧。
[外链图片转存中…(img-jCvOnhY1-1643530696295)]
[外链图片转存中…(img-w7LhXgyl-1643530696296)]
[外链图片转存中…(img-lxSYcetO-1643530696296)]
[外链图片转存中…(img-5Ba0p3cR-1643530696297)]
[外链图片转存中…(img-Lq6fOIBi-1643530696297)]
[外链图片转存中…(img-SPGwYBus-1643530696298)]
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
0
0- 0
已为社区贡献24条内容
所有评论(0)