标签: flutter-navigation

我正在尝试使用 Flutter 制作一个使用底部导航栏的应用程序。我想将我以前访问过的屏幕保留在导航堆栈中，就像在 Youtube 和 Instagram 应用程序中一样。例如，假设我有 3 个不同的底部导航栏（A、B 和 C）。分别点击A、B、C标签后，想分别返回C、B、A。

这是我的主要目标，但如果有可能实现，我还有一个次要目标。

在 Instagram 和 Youtube 中，如果您按 A -> B -> C -> B -> C 的顺序单击选项卡（现在您在选项卡 C 上），然后当您开始单击后退按钮时，它会返回到 C -> B -> 标签。基本上，每个选项卡都可以在导航堆栈中放置一次。如果您多次访问同一个选项卡，同一选项卡的前一个屏幕将从导航堆栈中删除。

我正在寻找这个问题的解决方案两天，但我找不到。我什至测试了由 alibaba 开发人员制作的flutter-go 应用程序，当我点击返回按钮时，应用程序刚刚关闭。

对于这个问题，我将不胜感激。

我想routes向导航堆栈添加一些内容，但不想推送这些屏幕。是否可以在导航中提供堆栈flutter？

例如——我有 3 个屏幕。A，B和C。

• 因此，我想直接转到屏幕C，后退按钮C应将我带到B，而B后退按钮应将我带到A。

我不想做这样的事——

Navigator.pushReplacementNamed(context, "/A");
Navigator.pushNamed(context, "/B");
Navigator.pushNamed(context,"/C");

我只想推送C并保留堆栈上剩余的 2 个路由，而不推送这些屏幕。

在 flutter 中，创建命名路由既简单又合乎逻辑，但仅限于返回 MaterialApp 时。

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        initialRoute: "/";

        return MaterialApp( //gives errors when I return a Container
            routes: {
                "/" : (context) => FirstRoute(),
                "/second route" : (context) => SecondRoute()
            }
        );
    } 
}

我不是 Material Design 的忠实粉丝，我想从我自己的设计中创建一个 UI。

但是当我在返回容器时应用相同的模式时，我收到一个错误。

所以我的问题是我如何使用香草 Flutter 应用程序命名路由设置，或者我是否被迫在我的项目中使用 MaterialApp？

提前致谢

我想知道我是否可以在 flutter app drawer header 中使用背景图像而不是颜色，有什么办法吗？

我可以自定义颜色，但我想知道是否有任何属性可以使用自定义图像更改颜色。

我是 flutter 的新手，希望有人帮助我处理我在 github 中找到的我想使用的代码。看看下面的链接 https://github.com/JohannesMilke/drawer_example

这是一个导航抽屉的例子。我喜欢开发人员对其进行编码的方式，并希望使用此示例。问题是开发人员没有实现导航到另一个页面。当您单击抽屉中的项目时，它只会在控制台中打印一条消息。

我想更进一步。我想修改代码，这样当你点击一个项目时，它会导航到另一个页面，抽屉会关闭。抽屉图标应保留在显示的新页面上的工具栏上。此外，当您导航到另一个页面时，应在工具栏中设置该页面的标题。

当我查看代码时，我知道在哪里更改，但我没有成功。我想我需要更改代码底部的 body 标签。问题是我不知道如何在 drawer_widget.dart 文件中调用 DrawerWidgetState 类。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final String appTitle =  'Ttitle';
  @override
  Widget build(BuildContext context) => MaterialApp(
    title: appTitle,
    theme: ThemeData(
      primaryColor: Colors.red,
      textTheme: TextTheme(
        subhead: TextStyle(
          color: Colors.black.withOpacity(0.4),
        ),
      ),
      dividerColor: Colors.black.withOpacity(0.4),
    ),
    home: MainPage(appTitle: appTitle),
  );
}

class MainPage extends StatefulWidget {
  final String appTitle;

  const MainPage({this.appTitle});

  @override
  MainPageState createState() => MainPageState();
}

class MainPageState extends State<MainPage> {
  @override
  Widget …

材料设计指南包括一个称为导航导轨的组件。

如何使用颤振创建导航栏？

我的 Flutter Web App 仍然没有成功，执行基于 URL 的路由并保持 appbar 和 drawer 等内容持久化。

我试图实现的目标是，我只能修改我的应用程序的内容。因此，即如果用户输入 url $baseurl/#/ 它应该导航到第一页的内容。$baseurl/#/two 到第二页的内容，依此类推...

我的主文件是这样的。正如您所看到的，它是通过 Fluro Router 完成的，我尝试简化一切以查看我的主要目标。

import 'package:flutter/material.dart';
import 'package:newnavigationtest/routes.dart';

void main() {
  FluroRouter.setupRouter();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MainLayout(),
    );
  }
}

class MainLayout extends StatelessWidget {
  final navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          Column(
            children: [
              Expanded(
                child: Container(
                  color: …

我的问题

这个问题是关于Flutter web的导航的。使用onGenerateRoute函数时，网络导航“接近”普通体验。我们可以使用浏览器的后退按钮弹出路由，推送新路由并在 URL 中获取这些路由的名称。但我的问题出在前进按钮上：

• 当返回浏览器时，我们无法继续前进。（没有那么糟糕）
• 当您手动输入路由的 URL 时，我们会继续该路由，但转发按钮已启用，并且单击时，会在路由堆栈中推送另一个相同的路由。（最大的问题）

示范

https://youtu.be/CZB1UDsB8mE

在此视频中，我展示了我的项目导航以及 0:26 后我遇到的问题

要重现的代码

我写了一个简单的项目来演示我的问题。

GitHub： https: //github.com/NeroThroN/navigator

解决方案

有人有解决方案在 Flutter 中包含并修复前进按钮或在浏览器中完全禁用前进按钮吗？

来自网络背景（角度），我真的对颤振路由感到困惑。

看来我并不孤单（1、2 、 ... ）。

从答案的相对复杂性以及与其中一些答案相关的各种错误来看，我想知道我是否只是想使用导航器作为它不是的东西。我尝试像使用网络框架的路由器一样使用它。如果 flutter 中的路由旨在更改整个屏幕而不是子窗口小部件。

在 Web 上，以下导航将类似于以下内容：

{ path: '/sign-in', widget: SignInPage() },
{ path: '/', widget: HomePage(), children: [
    { path: '/a', widget: DashboardPage() },
    { path: '/b', widget: ProfilePage(), children: [
       { path: '/general', widget: BGeneralPage() },
       { path: '/settings', widget: BSettingsPage() },
    ] }
] }
// example url x.com/b/settings

在flutter中你可以放置一个嵌套的Navigator，但是热重载似乎失败了，而且默认动画也很垃圾。甚至嵌套导航的文档也说<<仅使用单个导航器就可以获得类似的结果>>。

在我看来，路由系统是为了在我们想要更改整个屏幕时使用的。PageView和TabBarView是用于内部导航的小部件。

- 是这样吗？

然而，我发现一个潜在的问题是，当 flutter web 可用时，它不会有匹配的 url。

我正在编写一个应用程序，其中登录屏幕要求用户提供各种权限并使用 Facebook 登录。

请求所有权限后，应用程序将移动到下一个屏幕以询问更多信息，然后返回到调用屏幕以完成其任务。

然而，Navigator.push 似乎在异步函数中没有按预期工作。

void function() async {
<...do something 1...>
Navigator.pushNamed(context, screenName);
<...do something 2...>
}

预期的行为 是<...do something 1...>运行，然后 Navigator 将调用下一个屏幕，一旦Navigator.pop(context);被第二个屏幕调用，应用程序将返回第一个屏幕并执行<...do something 2...>。这是它在应用程序中的所有其他屏幕中的工作方式。

调用实际行为 <...do something 1...>，然后<...do something 2...>在某个时刻触发导航器。

这导致我必须采取各种措施来尝试通过此方式阻止应用程序的流程，但这似乎是非常奇怪的行为。

有其他人经历过这种情况，或者可以给我解决方法吗？这甚至不涉及await函数的各个部分，说它让我发疯有点轻描淡写。

非常感谢任何帮助！