Flutter中许多路线/页面和自制模板的最佳方法是啥？

Posted 2023-03-07

【中文标题】Flutter中许多路线/页面和自制模板的最佳方法是啥？

【英文标题】：What is the best approach for many routes / pages and self-made template in Flutter, for mobile?Flutter中许多路线/页面和自制模板的最佳方法是什么？

【发布时间】：2020-01-03 09:31:02

【问题描述】：

我开始使用 Flutter (Dart) 在 android Studio 中构建应用程序。一世 想要在应用程序中插入两本书的摘要，所以它会有一本 35 条路线（或页面）和另外 35 条路线（或页面）。 此时我的应用看起来像这样：我有一个

Intro_Page

路由到

Main_Page

的按钮。从 Main_Page 有

两个按钮

：一个用于

BookA

，另一个用于

BookB

。用户输入

BookA

后，在文本之后，会发现另一个 按钮转到下一页

BookA_1

和此页上的另一个按钮

BookA_2

等

---

我的问题是：

有没有什么方法可以使用每个页面都可以重复使用的模板？

我必须将所有代码放入 main.dart 文件，或者我可以为每个页面创建一个 dart 文件并在它们之间导航 纽扣？

有没有可能的方法来创建一个自制模板，它在所有页面中都使用设计布局，所以我不必重写代码 一人一个？只是布局而不是内容（文本）。

还有其他更好的方法吗？

---

PS：任何其他建议都会有所帮助。

非常感谢您回答这个问题！

【问题讨论】：

如果您非常了解移动应用程序开发，那么 .dart 就不是主要区别了。这是关于你如何写作的逻辑。创建一个布局并在单击按钮时以编程方式加载下一个内容。

我从 5 天前开始。我理解它的逻辑，但我不知道如何实现它。

答案真的很大，*** 不是适合它的平台。我建议谷歌一些显示文本的基本示例代码，然后只需单击按钮即可更改它。

我已经以基本形式完成了。我觉得这不是最好的方法（因为如果我这样做，我必须重复很多代码），这就是为什么我在这里发布它以获得一些新的方法。

【参考方案1】：

您可以为路由创建一个通用类，因为您可以减少导航代码。

你可以像这样创建一个类

import 'package:flutter/material.dart';

class MyNavigator 
  static navigate(BuildContext context, Widget page) async 
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (_) 
        return page;
      ),
    );
  

并将其用作

MyNavigator.navigate(context: context, page: BookA());

希望对你有帮助。

------------------------------------ 更新 ---------- ----------------------

您也可以使用扩展方法。

为此，您至少需要Dart 2.7！

扩展方法的实现如下

import 'package:flutter/material.dart';

extension NavigatorHelper on Widget 
  goHere(BuildContext context) async 
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (_) => this),
    );
  

你可以把它当作

BookA().goHere(context);

在我看来，扩展方法是个好方法。 你可以同时使用。

【讨论】：

我已经更新了答案，您也可以检查该方法。如果这个答案真的解决了你的问题，请接受这个答案。