扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编这次要给大家分享的是Flutter如何使用Navigator进行局部跳转页面，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。
创新互联公司服务项目包括渝水网站建设、渝水网站制作、渝水网页制作以及渝水网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，渝水网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到渝水省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
Navigator组件使用的频率不是很高，但在一些场景下非常适用，比如局部表单多页填写、底部导航一直存在，每个tab各自导航场景。
Navigator 是管理路由的控件，通常情况下直接使用Navigator.of(context)的方法来跳转页面，之所以可以直接使用Navigator.of(context)是因为在WidgetsApp中使用了此控件，应用程序的根控件通常是MaterialApp，MaterialApp包含WidgetsApp，所以可以直接使用Navigator的相关属性。
Navigator用法非常简单，如下：
Navigator(
initialRoute: '/',
onGenerateRoute: (RouteSettings settings) {
WidgetBuilder builder;
switch (settings.name) {
case 'home':
builder = (context) => PageA();
break;
case 'user':
builder = (context) => PageB();
break;
}
return MaterialPageRoute(builder: builder, settings: settings);
},
)initialRoute表示初始化路由，onGenerateRoute表示根据RouteSettings生成路由。
那么在什么情况下需要使用Navigator？在需要局部页面跳转的地方使用Navigator，如下面的场景：
头条客户端举报场景
头条客户端每一个新闻下面都有一个“叉号”，点击弹出相关信息，点击其中的局部，会在当前小窗户内跳转到举报页面，效果如下：
此场景就是使用Navigator的典型场景，点击举报，并不是全屏切换页面，而是仅仅在当前弹出的页面进行切换。
首页代码如下：
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 350,
width: 300,
child: Navigator(
initialRoute: '/',
onGenerateRoute: (RouteSettings settins) {
WidgetBuilder builder;
switch (settins.name) {
case '/':
builder = (context) => PageC();
break;
}
return MaterialPageRoute(builder: builder);
},
),
),
);
}Navigator的初始化路由为PageC页面，PageC页面代码如下：
class PageC extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Card(
child: Column(
children: [
_buildItem(Icons.clear, '不感兴趣', '减少这类内容'),
Divider(),
_buildItem(Icons.access_alarm, '举报', '标题夸张，内容质量差 等',
showArrow: true, onPress: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return PageD();
}));
}),
Divider(),
_buildItem(Icons.perm_identity, '拉黑作者：新华网客户端', ''),
Divider(),
_buildItem(Icons.account_circle, '屏蔽', '军事视频、驾驶员等'),
],
),
),
);
}
_buildItem(IconData iconData, String title, String content,
{bool showArrow = false, Function onPress}) {
return Row(
children: [
Icon(iconData),
SizedBox(
width: 20,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(fontSize: 18),
),
Text(
content,
style: TextStyle(
color: Colors.black.withOpacity(.5), fontSize: 14),
)
],
),
),
!showArrow
? Container()
: IconButton(
icon: Icon(Icons.arrow_forward_ios),
iconSize: 16,
onPressed: onPress,
),
],
);
}
} PageC页面跳转到PageD页面，PageD页面代码如下：
class PageD extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 200,
width: 250,
color: Colors.grey.withOpacity(.5),
child: Column(
children: [
Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.of(context).pop();
},
),
Text('返回'),
SizedBox(
width: 30,
),
Text('举报'),
],
),
],
),
);
}
} 
最终实现了局部跳转效果，只在中间区域变化，其他区域不变。
Tab内跳转
还有一个典型到应用场景就Tab内跳转，效果如下：
底部导航一直存在，每个tab都有自己的导航器。
首页代码如下：
class TabMain extends StatefulWidget {
@override
State createState() => _TabMainState();
}
class _TabMainState extends State {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _currentIndex,
children: [
TabNavigator(0),
TabNavigator(1),
TabNavigator(2),
],
),
bottomNavigationBar: BottomNavigationBar(
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(title: Text('首页'), icon: Icon(Icons.home)),
BottomNavigationBarItem(title: Text('书籍'), icon: Icon(Icons.book)),
BottomNavigationBarItem(
title: Text('我的'), icon: Icon(Icons.perm_identity)),
],
),
);
}
} 首页定义了3个tab及切换效果。
定义TabNavigator：
class TabNavigator extends StatelessWidget {
TabNavigator(this.index);
final int index;
@override
Widget build(BuildContext context) {
return Navigator(
initialRoute: '/',
onGenerateRoute: (RouteSettings settins) {
WidgetBuilder builder;
switch (settins.name) {
case '/':
builder = (context) => ListPage(index);
break;
}
return MaterialPageRoute(builder: builder);
},
);
}
}列表页面，此页面一般为List页面，点击其中一个跳转到相关详情页面，这里为了简便，只放了一个跳转按钮：
class ListPage extends StatelessWidget {
ListPage(this.index);
final int index;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: RaisedButton(
child: Text('$index'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return DetailPage();
}));
},
),
),
);
}
}详情页面
class DetailPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Text('DetailPage'),
),
);
}
}虽然Navigator控件不是特别常用，但在一些场景下非常适用。
看完这篇关于Flutter如何使用Navigator进行局部跳转页面的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网