Implementation of routing and navigation developed by fluent
If the basic unit that constitutes a view element is a component, the basic unit that constitutes an application is a page. For applications with multiple pages, how to smoothly transition from one page to another is a problem that needs to be considered by the technical framework.
In front-end development, the routing framework can be used to uniformly manage pages and their jumps. In Android, route refers to an activity, and in IOS, it refers to a viewcontroller. You can open a new route through startactivity or pushviewcontroller. In fluent, the management and navigation of routes refer to the design ideas of front-end and client, and route and navigator need to be used for unified management.
Among them, route is the abstraction of the page, which is mainly responsible for creating the interface, receiving parameters and responding to the opening and closing of the navigator. The navigator is used to maintain the management of the route stack. When the route is opened, it enters the stack, and when the route is closed, it exits the stack. Of course, it can also replace a route in the stack. As an official route management component, navigator provides a series of methods to manage the route stack. The two most commonly used methods are push () and pop (), which have the following meanings.
In addition to the push () and pop () methods, navigator also provides many other practical methods, such as replace (), removeroute () and popuntil (), which can be selected reasonably according to the use scenario.
According to whether the page identifier needs to be registered in advance, the route management in fluent can be divided into basic route and named route.
Let's focus on the basic routing and named routing of routing management in fluent.
Basic routing
In the development of flutter, the use of basic routes is very similar to the way native Android and IOS open new pages. To open a new page, you only need to create a MaterialPageRoute object instance, and then call the Navigator.push () method to press the new page to the top of the routing stack. If you want to return to the previous page, you can call the Navigator.pop () method.
Among them, materialpageroute is a routing template, which defines the related configuration of route creation and route switching transition animation. This configuration can realize route switching animation with the same style as the platform page switching animation according to different platforms. The following is an example of page Jump using navigator. The code is as follows.
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第一个页面'),),body: Center(
child: RaisedButton(
child: Text('跳转到第二个页面'),onPressed: () => Navigator.push(context,MaterialPageRoute(builder: (context) => SecondPage()))),);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('第二个页面'),body: Center(
child: RaisedButton(
child: Text('返回上一个页面'),onPressed: () => Navigator.pop(context)),);
}
}
In the above example, we created two pages, each containing a button. When you click the button on the first page, you will navigate to the second page, and clicking the button on the second page will return to the first page. Run the above code, and the effect is shown in the figure below.
It can be found that the jump page uses the navigator. Push () method, which can add a new route to the top of the stack of route objects managed by navigator. Materialpageroute is used to create a new route object. Materialpageroute is a subclass of pageroute, which defines the relevant interfaces and properties of transition animation during route creation and switching, and has its own page switching animation. The Android platform page slides upward and fades out when entering the animation, and the opposite is when exiting. The IOS platform page slides in from the right when entering the animation, and the opposite is when exiting.
Named route
The use of basic routing is relatively simple and flexible, and is suitable for scenarios with few pages in the application. When there are many pages in the application, if the basic routing method is used again, the materialpageroute instance must be created manually every time a new page is jumped, and then the push () method is called to open a new page. At this time, the page management and jump are chaotic.
To avoid frequent creation of materialpageroute instances, fluent provides another way to simplify route management, that is, named routes. The so-called named route is to give an alias to the page, and then use the alias of the page to open it. This way is used to manage the route, making the route management more clear and intuitive.
To specify page switching by alias, you must first provide the application materialapp with a page name mapping rule, that is, a routing table. The routing table is a map < string, widgetbuilder > structure, where key corresponds to the page name and value corresponds to the page, as shown below.
MaterialApp(
... //其他配置
routes:{ //注册路由
'first':(context)=>FirstPage(),'second':(context)=>SecondPage(),},initialRoute: 'first',//初始路由页面
);
After registering the page in the routing table, you can open the page through the navigator. Pushnamed() method, as shown below.
Navigator.pushNamed(context,"second "); // second表示页面别名
However, since the registration and use of routes are identified by strings, this will bring a problem, that is, if you open a non-existent route page. For this kind of problem, mobile applications have a general solution, that is, jump to a unified error page. When registering the routing table, fluent provides an unknownroute attribute to perform uniform page Jump processing for unknown routing identifiers, as shown below.
MaterialApp(
…
routes:{},onUnkNownRoute: (RouteSettings setting) => MaterialPageRoute(builder: (context) => UnkNownPage()),//错误路由处理，返回UnkNownPage
);
class UnkNownPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('错误路由'),);
}
}
Route nesting
Sometimes, an application may have more than one navigator, but multiple navigators. The behavior of nesting one navigator in another navigator is called route nesting. Route nesting is very common in mobile development. For example, in mobile development, it is often seen that the application home page has a bottom navigation bar, and each bottom navigation bar is nested with other pages. The effect is shown in the following figure.
To achieve the above example effect, first create a new bottom navigation bar, and then nest other sub routes by the bottom navigation bar. For the implementation of the bottom navigation bar, you can directly use the bottomnavigationbar property of the scaffold layout component, as shown below.
class MainPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MainPageState();
}
}
class MainPageState extends State<MainPage> {
int currentIndex = 0; //底部导航栏索引
final List<Widget> children = [
HomePage(),//首页
minePage(),//我的
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: children[currentIndex],bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,currentIndex: currentIndex,items: [
BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),BottomNavigationBarItem(icon: Icon(Icons.person),title: Text('我的')),],);
}
void onTabTapped(int index) {
setState(() {
currentIndex = index;
});
}
}
Then, each bottom navigation bar will nest a sub route, and then the sub route will manage the corresponding route page. In fluent, the navigator component is required to create a sub route, and the ongenerateroute attribute is required to intercept the sub route, as shown below.
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Navigator(
initialRoute: 'first',onGenerateRoute: (RouteSettings settings) {
WidgetBuilder builder;
switch (settings.name) {
case 'first':
builder = (BuildContext context) => FirstPage();
break;
case 'second':
builder = (BuildContext context) => SecondPage();
break;
}
return new MaterialPageRoute(builder: builder,settings: settings);
},);
}
}
Run the above code. When you click the button on the sub route page, the navigation bar at the bottom will not disappear, because the sub route is only valid within its own range. To jump to other sub route management pages, you need to register in the root navigator, that is, the navigator inside materialapp.
Routing parameters
In mobile application development, the transmission of page parameters is also a common requirement. In order to meet the needs of parameter transfer during page Jump in different scenarios, fluent provides a routing parameter mechanism, which can transfer parameters when opening the route, and then obtain the parameters transferred by the page through routesettings on the target page, as shown below.
Navigator.of(context).pushNamed("second ",arguments: " from first page");
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
//取出路由参数
String msg = ModalRoute.of(context).settings.arguments as String;
… //数据处理
}
}
In addition, for some specific pages, you also need to return the processing results of page processing when they are closed. This is similar to the scenario in which the startactivityforresult () method provided by Android listens for the processing results returned by the target page. Fluent also provides a parameter mechanism for page return. Specifically, when using the push () method to open the target page, you can set the listening function when the target page is closed to obtain the return parameters. When the target page closes the route, you can use the pop () method to return the parameters. For example, the following is the parameter value transfer and parameter value return between two pages. The code is as follows.
class FirstPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return FirstPageState();
}
}
class FirstPageState extends State<FirstPage> {
String result = '';
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Text('from seconde page: ' + result,style: TextStyle(fontSize: 20)),RaisedButton(
child: Text('跳转'),//使用then()获取目标页面返回参数
onPressed: () => Navigator.of(context)
.pushNamed("second",arguments: "from first page")
.then((msg) => setState(() => result = msg)))
],)),);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
String msg = ModalRoute.of(context).settings.arguments as String;
return Scaffold(
body: Center(
child: Column(children: [
Text('from first screen: ' + msg,RaisedButton(
child: Text('返回'),onPressed: () => Navigator.pop(context,"from second page"))
]),));
}
}
Running the above code, you can see that when the second page is closed and returns to the first page, the first page will display the returned parameter values, and the final effect is shown in the figure below.
MaterialPageRoute
In the process of using routing, the materialpageroute class will be used. Materialpageroute inherits from pageroute class. Pageroute class is an abstract class that represents a modal route page occupying the whole screen space. It also defines the relevant interfaces and properties of transition animation during route construction and switching.
Materialpageroute is a component provided by the material component library. It can realize route switching animation with the same style as the platform page switching animation for different platforms: when opening the page, the new page will slide from the right edge of the screen to the left of the screen until all the new pages are displayed on the screen, The previous page will slide from the current screen to the left of the screen and disappear; When the page is closed, the opposite is true, @ r_ 404_ 1928 @ will slide out from the right side of the screen and the previous page will slide in from the left side of the screen.
The meanings of the materialpageroute constructor and the parameters are as follows:
MaterialPageRoute({
@required this.builder,RouteSettings settings,this.maintainState = true,bool fullscreenDialog = false,})
Their specific meanings are as follows:
summary
Fluent provides basic routing and named routing to manage jump between pages. Among them, the basic route needs to manually create page instances and complete page Jump through navigator.push; The named route needs to register the page identifier and page creation method in advance, and the page Jump is realized by passing in the identifier through navigator.pushnamed.
For named routes, if we need to respond to the wrong route identifier, we also need to register unknownroute. In order to finely control route switching, fluent provides a parameter mechanism for page opening and page closing. We can take out the corresponding parameters during page creation and target page closing. It can be seen that for routing navigation, fluent integrates the characteristics of Android, IOS and react, which is simple and powerful.
In medium and large-scale applications, named routing is usually used to manage the switching between pages. The most important role of named routing is to establish the mapping relationship between the string identifier and each page, so as to completely decouple each page. The switching of pages in the application can be done only through a string identifier, which lays a good foundation for later modularization.
In addition, nested routing and routing parameters are also the core contents of the routing framework. This article is only the basic knowledge of flutter routing and navigation. Later, we will introduce flutter routing development and navigation from the aspects of pushreplacementnamed, popandpushnamed, pushnamedandremoveuntil and popuntil, as well as third-party navigation library and source code analysis.
The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.