Question

我想使用CupertinoPageRoute而不是Navigator.pushNamed 在MaterialApp中使用路由数组。 Navigator.pushNamed（上下文，p01.routeName）;工作良好。但是我想完成两个项目。

我希望导航为Android中的Cupertino风格。从右到左，而不是从下到上。
导航将非常深入，我想添加一个返回按钮...。 Navigator.popUntil（上下文， ModalRoute.withName（'/'））;我可以回到特定位置在导航堆栈中。

我如何使用名为Routes的路线和 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('/'));
                  },
                ),
              ),

Answer 1

TL; DR：：使用onGenerate / MaterialApp中的CupertinoApp使用自定义路由。例如CupertinoPageRoute。如果您已经在使用Cupertino风格，请考虑使用CupertinoApp，它会自动使用CupertinoPageRoute。

我将答案分为两种解决方案，一种是默认MaterialApp，另一种是CupertinoApp（使用Cupertino-Style）：

保持风格（MaterialApp）：

如果要将MaterialApp保留为根窗口小部件，则必须用routes实现替换MaterialApp的{{1}}属性：

原文：

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); } }手动处理路由，并为每个路由使用CupertinoPageRoute。这将替换完整的onGenerate结构。

快速独立示例：

routes: {...}

Cupterino样式（CupertinoApp）：

如果您仍然想使用 Cupertino-style ，我建议您使用CupertinoApp小部件，而不要使用MaterialApp小部件（就像已经在注释中建议的那样） @ anmol.majhail）。

然后默认选择的导航将始终使用CupertinoPageRoute。

独立的快速示例：

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'),
          ),
        ],
      ),
    );
  }
}

如何在Flutter中使用CupertinoPageRoute和命名路由？

1 个答案: