1、基本路由及传值
//跳转传值
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>GoodsDetailsWidget(title:'这是我的传值')
)
);
//接收传值 先在widget里定义变量
class FormPage extends StatelessWidget {
String title;
GoodsDetailsWidget({this.title="默认值"}); //{}表示可选
@override
Widget build(BuildContext context) {
.............
}
//返回上一级页面
Navigator.of(context).pop();
2、命名路由及传值
//首先在main.dart的MaterialApp下定义routes
routes: {
'/goodDetals':(context)=>GoodDetals(), //goodDetals为自定义
'/geachDetals':(context)=>TeachDetals(),
}
//命名路由跳转
Navigator.pushNamed(context, '/goodDetals');
Navigator.pushNamed(context, '/geachDetals');
自定义路由传值
首先自定义路由Routes.dart
import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/GoodDetails.dart';
import '../pages/TeachDetails.dart';
//配置路由
final routes={
'/':(context)=>Tabs(), //初始化底部tab栏使用
'/goodDetails':(context)=>GoodDetails(), //没有传值
'/teachDetails':(context,{arguments})=>TeachDetails(arguments:arguments), //传值 参数为arguments
};
//固定写法
var onGenerateRoute=(RouteSettings settings) {
// 统一处理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
}else{
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context));
return route;
}
}
};
main.dart配置
import 'package:flutter/material.dart';
import 'routes/Routes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home:Tabs(),
initialRoute: '/', //初始化的时候加载的路由
onGenerateRoute: onGenerateRoute
);
}
}
使用
//不带值路由跳转
Navigator.pushNamed(context, '/goodDetails');
//带传值路由跳转
Navigator.pushNamed(context, '/goodDetails',arguments: { "id":123
});
//接收传值 StatelessWidget组件
class GoodDetails extends StatelessWidget {
final arguments;
SearchPage({this.arguments});
@override
............
body: Text("商品详情页id值${arguments != null ? arguments['id'] : '0'}"),
}
----------------------------------
//接收传值 StatefulWidget组件
class GoodDetails extends StatefulWidget {
final Map arguments;
GoodDetails({Key key,this.arguments}) : super(key: key);
_GoodDetailsState createState() => _GoodDetailsState(arguments:this.arguments);
}
class _GoodDetailsState extends State<GoodDetails> {
Map arguments;
_GoodDetailsState({this.arguments});
@override
........
body: Container(
child: Text("pid=${arguments["id"]}"),
),
}
3、替换路由、返回根路由
//替换路由
如:A、B、C 三个页面,点击A页面的按钮跳转至B页面,在B页面跳转代码改为替换路由
Navigator.of(context).pushReplacementNamed('/c');
当在C页面返回时 直接会返回到A页面
//返回根路由 需在Tabs页面定义index值
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => new Tabs(index:2)),
(route) => route == null
);
//Tabs.dart
int _currentIndex;
_TabsState(index){
this._currentIndex=index;
}