Flutter 页面跳转 :
// 通过路由名称实现页面跳转 , 通过路由名称字符串实现跳转
Navigator.pushNamed(context, "LayoutPage");
// 通过 Navigator 实现页面跳转 , 直接通过页面组件对象跳转
Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));
注册路由 : 在 MaterialApp 根节点组件中的 routes 字段注册路由 , 路由信息存储在 Map<String, WidgetBuilder> 集合中 , 键是路由名称 , 值是页面 Widget 组件 ;
代码示例 :
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// 设置标题
title: 'Flutter Demo',
// 设置主题
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 设置界面主组件
home: Scaffold(
// 设置标题栏
appBar: AppBar(
title: Text("路由与导航"),
),
// 设置界面主体组件
body: RouteNavigator(),
),
// 配置路由
routes: <String, WidgetBuilder>{
"StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(),
"StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(),
"LayoutPage" : (BuildContext context) => LayoutPage()
},
);
}
}
代码解析 : 上述代码的作用是注册如下路由信息 ,
StatelessWidgetPage 页面组件对应的路由名称是 " StatelessWidgetPage " 字符串 ,
StatefulWidgetPage 页面组件对应的路由名称是 " StatefulWidgetPage " 字符串 ,
LayoutPage 页面组件对应的路由名称是 " LayoutPage " 字符串 ,
通过路由名实现页面跳转 : 调用 Navigator 的 pushNamed 方法 , 实现页面跳转 , 第一个参数是 BuildContext context , 第二个参数是路由名字符串 ; 代码格式如下 :
Navigator.pushNamed(上下文对象, "路由名称");
代码示例 : 下面代码的作用是跳转到 “LayoutPage” 路由名称对应的页面 ;
RaisedButton(
onPressed: (){
Navigator.pushNamed(context, "LayoutPage");
},
child: Text("通过路由名跳转到页面1"),
),
调用 Navigator.push 方法实现页面跳转 , 此处第二个参数传入 MaterialPageRoute<T> 类型对象 , 代码如下 :
Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));
代码示例 : 跳转到 LayoutPage 界面 ;
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));
},
child: Text("通过导航跳转到页面1"),
),
在 AppBar 组件中设置回退按钮点击事件 , 调用 Navigator.pop(context) 方法 , 即可退出当前界面 ;
// 退出当前界面
Navigator.pop(context);
代码示例 :
import 'package:flutter/material.dart';
class LayoutPage extends StatefulWidget {
@override
_LayoutPageState createState() => _LayoutPageState();
}
class _LayoutPageState extends State<LayoutPage> {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '布局组件示例',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
// 顶部标题栏
appBar: AppBar(
title: Text('布局组件示例'),
// 回退按钮, 点击该按钮退出该界面
leading: GestureDetector(
onTap: (){
// 退出界面方法
Navigator.pop(context);
},
child: Icon(Icons.arrow_back_ios),
),
),
body: 主组件省略,
)
);
}
}
完整代码示例 :
import 'package:flutter/material.dart';
import 'package:flutter_cmd/StatelessWidgetPage.dart';
import 'LayoutPage.dart';
import 'StatefulWidgetPage.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// 设置标题
title: 'Flutter Demo',
// 设置主题
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 设置界面主组件
home: Scaffold(
// 设置标题栏
appBar: AppBar(
title: Text("路由与导航"),
),
// 设置界面主体组件
body: RouteNavigator(),
),
// 配置路由
routes: <String, WidgetBuilder>{
"StatelessWidgetPage" : (BuildContext context) => StatelessWidgetPage(),
"StatefulWidgetPage" : (BuildContext context) => StatefulWidgetPage(),
"LayoutPage" : (BuildContext context) => LayoutPage()
},
);
}
}
class RouteNavigator extends StatefulWidget {
@override
_RouteNavigatorState createState() => _RouteNavigatorState();
}
class _RouteNavigatorState extends State<RouteNavigator> {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: (){
Navigator.pushNamed(context, "LayoutPage");
},
child: Text("通过路由名跳转到页面1"),
),
RaisedButton(
onPressed: (){
Navigator.pushNamed(context, "StatefulWidgetPage");
},
child: Text("通过路由名跳转到页面2"),
),
RaisedButton(
onPressed: (){
Navigator.pushNamed(context, "StatelessWidgetPage");
},
child: Text("通过路由名跳转到页面3"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => LayoutPage()));
},
child: Text("通过导航跳转到页面1"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => StatefulWidgetPage()));
},
child: Text("通过导航跳转到页面2"),
),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => StatelessWidgetPage()));
},
child: Text("通过导航跳转到页面3"),
),
],
),
);
}
}
设置回退按钮示例 :
import 'package:flutter/material.dart';
class LayoutPage extends StatefulWidget {
@override
_LayoutPageState createState() => _LayoutPageState();
}
class _LayoutPageState extends State<LayoutPage> {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '布局组件示例',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
// 顶部标题栏
appBar: AppBar(
title: Text('布局组件示例'),
// 回退按钮, 点击该按钮退出该界面
leading: GestureDetector(
onTap: (){
// 退出界面方法
Navigator.pop(context);
},
child: Icon(Icons.arrow_back_ios),
),
),
body: 主组件省略,
)
);
}
}
运行效果展示 :
参考资料 :
博客源码下载 :