flutter - 我们应该用 Flutter 不同的导航选项选择哪一个？

Question

背景
Flutter 提供了两种不同的导航选项。
选项 1. 在 MaterialPageRoute 中使用 Widget 类。

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

关键部分。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondRoute()),
);

使用 Navigator push 方法并将 SecondRoute 实例传递给 MaterialPageRoute 构造函数。
如果需要传递参数。

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              // The parameter passed via SecondRoute constructor.
              MaterialPageRoute(builder: (context) => SecondRoute(message: 'The message for second view.')),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  // This is the parameter the SecondRoute needs.
  final String message;
  
  SecondRoute({@required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

选项 2. 使用路由。

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Launch screen'),
          onPressed: () {
            // Navigate to the second screen using a named route.
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

关键部分。

Navigator.pushNamed(context, '/second');

还需要在 MaterialApp 中注册路由。

void main() {
  runApp(MaterialApp(
    title: 'Named Routes Demo',
    // Start the app with the "/" named route. In our case, the app will start
    // on the FirstScreen Widget
    initialRoute: '/',
    routes: {
      // When we navigate to the "/" route, build the FirstScreen Widget
      '/': (context) => FirstScreen(),
      // When we navigate to the "/second" route, build the SecondScreen Widget
      '/second': (context) => SecondScreen(),
    },
  ));
}

如果需要传递参数。

// When the user taps the button, navigate to a named route
// and provide the arguments as an optional parameter.
Navigator.pushNamed(
  context,
  '/second',
  arguments: 'The message for second view.',
);

需要做一些额外的工作来获取参数。

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Gets the parameter from the route. Any type of the parameter is allowed.
    final String message = ModalRoute.of(context).settings.arguments;
  
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

两个选项

小工具

简单易用。

这个小部件可以被导航或小部件树使用。

路线

MaterialApp 中的额外路由配置。

从路由中检索参数的额外工作。

看起来没有对参数类型进行编译时检查。

不能在 Widget 树中使用，因为将没有路由参数。

问题

从生产就绪系统中，我们应该选择哪个选项。

为什么选择一个而不是另一个？

官方引用

Navigate to a new screen and back

Navigate with named routes

Pass arguments to a named route

Answer 1

我认为不应该使用一种或另一种，为什么不使用两者，但这取决于项目结构和产品要求。

我通常执行以下操作:

如果新屏幕依赖于一些参数，任何参数，我将使用你的第一个选项，我很喜欢在它的构造函数中指定一个类的依赖项，在这种情况下，在小部件构造函数中。

如果我已经有一个具有依赖项的屏幕，我不会将命名路由与“未命名”路由混合使用。

对于特殊屏幕，例如标签导航中的根屏幕，具有简单导航(如帮助、关于我们、T&C)，我通常会使用命名路线导航。

在我看来，如果屏幕有依赖关系，你的第一个选项更可靠，你会避免很多错误，你会得到类型检查，我认为它更容易扩展和维护。

第二个选项是用于简单导航。

所以总而言之，在我看来，如果框架提供了多种方式来做一件事，你不应该选择“这个或另一个”，通常最好选择“这个和另一个”，你应该考虑常见的情况当一种方法效果更好时，如果您发现另一种实现效果更好的情况，请不要害怕使用它，毕竟。