我想使用 CupertinoPageRoute 而不是 Navigator.pushNamed 在 MaterialApp 中使用 routes 数组。 Navigator.pushNamed(context, p01.routeName);工作正常。但是我想完成两个项目。
我希望导航是 Android 中的库比蒂诺风格。从右到左,而不是从下到上。
导航会很深,我想包括一个返回按钮……像这样。 Navigator.popUntil(上下文, ModalRoute.withName('/'));我可以在哪里返回特定位置 在导航堆栈中。
我如何使用路由,namedRoutes 和 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);
},
),
),
======= 这是返回根目录的代码。
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
。
我将此答案分为两种解决方案,一种使用默认 MaterialApp
,另一种使用 CupertinoApp
(使用 Cupertino-Style):
保持你的风格(MaterialApp):
如果您想保留 MaterialApp作为您的根小部件,您必须将 MaterialApp
的 routes
属性替换为 onGenerate
实现:
原文:
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: {...}
结构。
快速独立示例:
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 风格 (CupterinoApp):
如果你想使用 Cupertino-Style,我建议使用 CupertinoApp小部件而不是 MaterialApp小部件(就像@anmol.majhail 在评论中已经建议的那样)。
那么默认选择的导航将始终使用 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 - 如何在 flutter 中使用 CupertinoPageRoute 和命名路由?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51663793/