时间戳

首页 > 解决方案 > 如何在颤动中使用 CupertinoPageRoute 和命名路由？

flutter - 如何在颤动中使用 CupertinoPageRoute 和命名路由？

问题描述

我想在 MaterialApp 中使用带有路由数组的 CupertinoPageRoute 而不是 Navigator.pushNamed。Navigator.pushNamed(context, p01.routeName); 工作正常。但我想完成两个项目。

  1. 我希望导航是 Android 中的库比蒂诺风格。从右到左，而不是从下到上。

  2. 导航会很深，我想包括一个返回按钮......就像这样。Navigator.popUntil(context, 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('/'));
                  },
                ),
              ),

标签： flutter

解决方案

TL;DR：使用/onGenerate来使用自定义路由。例如. 如果您已经在使用 Cupertino-Style，请考虑使用，它会自动使用.MaterialAppCupertinoAppCupertinoPageRouteCupertinoAppCupertinoPageRoute

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

保持你的风格（MaterialApp）：

如果您想将MaterialApp保留为您的根小部件，则必须将您的routes属性替换MaterialApp为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: {...}结构。

快速独立示例：

MaterialApp 解决方案示例

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-Style，我建议使用CupertinoApp小部件而不是MaterialApp小部件（就像 @anmol.majhail 的评论中已经建议的那样）。

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

快速独立示例：

CupertinoApp 演示

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

推荐阅读