如何在Flutter中使用CupertinoPageRoute和命名路由? [英] how to use CupertinoPageRoute and named routes in flutter?
问题描述
我想使用CupertinoPageRoute而不是Navigator.pushNamed 在MaterialApp中使用路由数组. Navigator.pushNamed(上下文，p01.routeName);工作正常.但是我想完成两个项目.
I want to use a CupertinoPageRoute instead of the Navigator.pushNamed with a routes array in MaterialApp. Navigator.pushNamed(context, p01.routeName); works fine. But I want to accomplish two items.
-
我希望导航为Android中的Cupertino风格.从右到左，而不是从下到上.
I want the navigation to be Cupertino Style in Android. Right To left, instead of Bottom to Top.
导航将非常深入，我想添加一个返回按钮.... Navigator.popUntil(上下文， ModalRoute.withName('/'));我可以返回到特定位置 在导航堆栈中.
Navigation will go very deep, and I want to include a return button... like this. Navigator.popUntil(context, ModalRoute.withName('/')); where I can return to specific locations in the navigation Stack.
我如何使用名为Routes的路线 和 CupertinoPageRoute(builder:(context)=> p02.routeName);
HOW can I use routes, namedRoutes and CupertinoPageRoute(builder: (context) => p02.routeName);
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'p01.dart';
import 'p02.dart';
import 'p03.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
initialRoute: '/',
// routes: {
// '/p01' : (context) => p01(),
// '/p02' : (context) => p02(),
// '/p03' : (context) => p03(),
// },
//***** . this is what I am trying to use for routes.
routes: <String, WidgetBuilder>{
p01.routeName: (BuildContext context) => new p01(title: "p01"),
p02.routeName: (BuildContext context) => new p02(title: "p02"),
p03.routeName: (BuildContext context) => new p03(title: "p03"),
},
);
}
}
...
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
child: Text(" cup P01"),
onPressed: () {
print("p01 was pressed");
//Navigator.pushNamed(context, p01.routeName);
// CupertinoPageRoute(builder: (context) => AA02Disclaimer()),
//CupertinoPageRoute(builder: (context) => p02());
// CupertinoPageRoute( p02.routeName );
// p02.routeName: (BuildContext context) => new p02(title: "p02"),
//**** . this is the code I am trying to make work...
CupertinoPageRoute(builder: (context) => p02.routeName);
},
),
),
======== 这是返回到根目录的代码.
======= This is code to return to the root.
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
child: Text("/"),
onPressed: () {
print("/ was pressed");
// Navigator.pushNamed(context, p03.routeName);
Navigator.popUntil(context, ModalRoute.withName('/'));
},
),
),
推荐答案
TL; DR:使用MaterialApp/CupertinoApp中的onGenerate使用自定义路由.例如CupertinoPageRoute.如果您已经在使用Cupertino-Style，请考虑使用CupertinoApp，它会自动使用CupertinoPageRoute.
TL;DR: Use onGenerate of MaterialApp / CupertinoApp to use custom routes. For example CupertinoPageRoute. If you are already using the Cupertino-Style consider using CupertinoApp, which automatically uses the CupertinoPageRoute.
我将答案分为两种解决方案，一种是默认的MaterialApp，另一种是CupertinoApp(使用Cupertino-Style):
I've split this answer in two solutions, one with the default MaterialAppand one with the CupertinoApp(using Cupertino-Style):
保持风格(MaterialApp):
如果您想保留 MaterialApp 作为您的根窗口小部件，必须将MaterialApp的routes属性替换为onGenerate实现:
If you want to keep the MaterialApp as your root widget you'll have to replace the routes attribute of your MaterialApp with an onGenerate implementation:
原文:
routes: {
'/': (_) => HomePage(),
'deeper': (_) => DeeperPage(),
}
已用onGenerate更改:
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/':
return CupertinoPageRoute(
builder: (_) => HomePage(), settings: settings);
case 'deeper':
return CupertinoPageRoute(
builder: (_) => DeeperPage(), settings: settings);
}
}
现在onGenerate手动处理路由，并为每个路由使用 CupertinoPageRoute .这将替换完整的routes: {...}结构.
Now onGenerate handles the routing manually and uses for each route an CupertinoPageRoute. This replaces the complete routes: {...} structure.
快速独立示例:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/':
return CupertinoPageRoute(
builder: (_) => HomePage(), settings: settings);
case 'deeper':
return CupertinoPageRoute(
builder: (_) => DeeperPage(), settings: settings);
}
},
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Material!'),
),
body: Center(
child: RaisedButton(
child: Text('Take me deeper!'),
onPressed: () => Navigator.pushNamed(context, 'deeper'),
),
),
);
}
}
class DeeperPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Material!'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RaisedButton(
child: Text('Home :)'),
onPressed: () =>
Navigator.popUntil(context, ModalRoute.withName('/')),
),
RaisedButton(
child: Text('Deeper!'),
onPressed: () => Navigator.pushNamed(context, 'deeper'),
),
],
),
);
}
}
Cupterino样式(CupertinoApp):
如果您仍然想使用 Cupertino-风格，我建议使用 MaterialApp 小部件(就像@ anmol.majhail在评论中建议的那样).
If you want to use the Cupertino-Style anyway, I would suggest to use the CupertinoApp widget instead of the MaterialApp widget (like already suggested in a comment by @anmol.majhail).
然后默认选择的导航将始终使用 CupertinoPageRoute .
Then the default chosen navigation will always use the CupertinoPageRoute.
简单的独立示例:
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
routes: {
'/': (_) => HomePage(),
'deeper': (_) => DeeperPage(),
},
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: Center(
child: CupertinoButton(
child: Text('Take me deeper!'),
onPressed: () => Navigator.pushNamed(context, 'deeper'),
),
),
);
}
}
class DeeperPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
CupertinoButton(
child: Text('Home :)'),
onPressed: () =>
Navigator.popUntil(context, ModalRoute.withName('/')),
),
CupertinoButton(
child: Text('Deeper!'),
onPressed: () => Navigator.pushNamed(context, 'deeper'),
),
],
),
);
}
}
这篇关于如何在Flutter中使用CupertinoPageRoute和命名路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
