.路由定义
Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navigator 组件管理路由导航。
并提供了管理堆栈的方法。如：Navigator.push 和 Navigator.pop
Flutter 中提供了两种配置路由跳转的方式：1、基本路由 2、命名路由
比如我们现在想从 HomePage 组件跳转到 SearchPage
1、需要在 HomPage 中引入 SearchPage.dart
import '../SearchPage.dart';
2、在 HomePage 中通过下面方法
RaisedButton(
child:
Text("跳转到搜索页面"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){return SearchPage();}
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
上面列子中Navigator 继承自 StatefulWidget，它有很多相关静态函数，可以帮我们达到页面跳转和数据交互的功能：
1.push 将设置的router信息推送到Navigator上，实现页面跳转。
2.of 主要是获取 Navigator最近实例的好状态。
3.pop 导航到新页面，或者返回到上个页面。
4.canPop 判断是否可以导航到新页面
5.maybePop 可能会导航到新页面
6.popAndPushNamed 指定一个路由路径，并导航到新页面。
7.popUntil 反复执行pop 直到该函数的参数predicate返回true为止。
8.pushAndRemoveUntil将给定路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。
9.pushNamed 将命名路由推送到Navigator。
10.pushNamedAndRemoveUntil 将命名路由推送到Navigator，删除先前的路由，直到该函数的参数predicate返回true为止。
11.pushReplacement 路由替换。
12.pushReplacementNamed 这个也是替换路由操作。推送一个命名路由到Navigator，新路由完成动画之后处理上一个路由。
13.removeRoute 从Navigator中删除路由，同时执行Route.dispose操作。
14.removeRouteBelow 从Navigator中删除路由，同时执行Route.dispose操作，要替换的路由是传入参数anchorRouter里面的路由。
replace 将Navigator中的路由替换成一个新路由。
16.replaceRouteBelow 将Navigator中的路由替换成一个新路由，要替换的路由是是传入参数anchorRouter里面的路由。
- 普通路由传参 =》widget构造参数传递
main.dart main.dart平级有个router_1文件夹
import 'package:flutter/material.dart';
import 'router_1/MainPage.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MainPage()
);
}
}
MainPage.dart 这个文件在router_1文件夹下
import 'package:flutter/material.dart';
import 'Search.dart';
class MainPage extends StatefulWidget {
final int numb;
MainPage({this.numb=1, Key key}) : super(key: key);
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
int _tabIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Router demo1')),
body: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RaisedButton(
child: Text('${widget.numb}跳转搜索页面'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) {
return SearchPage(title: 'title-是首页传过来的 此时是搜索页面');
}));
},
),
Container(
color: Colors.red,
height: 30,
width: 30,
),
Container(
color: Colors.blue,
height: 30,
width: 30,
),
Container(
color: Colors.yellow,
height: 30,
width: 30,
)
])),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _tabIndex,
type: BottomNavigationBarType.fixed,
iconSize: 24.0,
items: [
BottomNavigationBarItem(
title: Text('首页'), icon: Icon(Icons.home)),
BottomNavigationBarItem(
title: Text('搜索'), icon: Icon(Icons.search))
]));
}
}
Search.dart 这个文件在router_1文件夹下
import 'package:flutter/material.dart';
import 'MainPage.dart';
class SearchPage extends StatelessWidget {
final String title;
SearchPage({this.title = '搜索de 页面'});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(this.title)),
body: ChildPage(),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.arrow_back),
onPressed: () {
Navigator.of(context).pop();
}),
);
}
}
class ChildPage extends StatelessWidget {
List<String> getDataList() {
List<String> list = [];
for (int i = 0; i < 100; i++) {
list.add(i.toString());
}
return list;
}
List<Widget> getWidgetList(context) {
return getDataList().map((item) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.deepPurple),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(item, style: TextStyle(color: Colors.white, fontSize: 20)),
IconButton(
icon: Icon(Icons.send, color: Colors.white, size: 16),
onPressed: () {
print(item);
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) {
return MainPage(numb: int.parse(item));
}));
})
]));
}).toList();
}
@override
Widget build(BuildContext context) {
return Container(
child: GridView.count(
crossAxisSpacing: 10.0,
mainAxisSpacing: 30.0,
padding: EdgeInsets.all(10.0),
crossAxisCount: 2,
childAspectRatio: 2.0,
children: getWidgetList(context),
));
}
}
这个小demo就实现了普通跳转加传值（这种方式进行的参数传递只能单向往下一个页面传递，不能像Android的 setResult 一样往上一级页面传递数据。），点击跳转到搜索页面按钮可以到search.dart,点击每个数字下面那个发送按钮，可以回到首页，下面悬浮的返回按钮用的pop，返回上一页
- 命名路由传参1 前提要在路由表配好如下
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MainPage(),
routes:{
"/search": (context)=>SearchPage(),
'/main':(context)=>MainPage()
}
);
}
}
1.传值
image
2.获取
image
- 命名路由传参2
lib=>routers=>routers.dart
// 路由抽离统一管理；
import 'package:flutter/material.dart';
import '../MainPage.dart';
import '../Search.dart';
// 配置路由
final routes = {
'/main': (context, {arguments}) => MainPage(arguments: arguments),
"/search": (context, {arguments}) => SearchPage(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 'router_2/MainPage.dart';
import 'router_2/routers/routers.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// home: MainPage(),
initialRoute: '/main',//初始化加载路由
onGenerateRoute: onGenerateRoute
// routes:{//配置onGenerateRoute，记得注释掉routes
// "/search": (context)=>SearchPage(),
// '/main':(context)=>MainPage()
// }
);
}
}
- 替换路由pushReplacementNamed
image
-
指定回到某个路由
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(
builder: (context) => new Tabs(index:1)),
(route) => route == null);
image
网友评论