Flutter：持续更改标题的应用栏

Question

我正在开发我的第一个 Flutter 应用程序，我正在努力寻找一个好的解决方案来解决这个问题。我的应用程序有多个页面和用户可以采取的不同路线。目前，我正在为这些页面中的每一个重新定义应用栏，这并不是什么大不了的事，因为所有放在应用栏上的是每个页面的标题。我想在每个页面的应用程序栏上放置一个按钮，无论他们在应用程序中的哪个位置，都会将用户返回到主页。我还需要能够更改不同页面上应用栏上的标题。我可以为每个页面重新定义导航功能，但直觉告诉我必须有更好的解决方案，因为这违反了 DRY 原则。提前致谢！

Answer 1

尝试制作一个包含

的新文件

import 'package:flutter/material.dart';

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String appBarText;
  CustomAppBar(this.appBarText);
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
  @override
  Widget build(BuildContext context) {
    return AppBar(
      centerTitle: true,
      title: Text(
        appBarText,
      ),
      leading: IconButton(
          icon: Icon(
            Icons.arrow_back_ios_sharp,
          ),
          onPressed: () => Navigator.pop(context)
      ),
    );
  }
}

然后在您需要使用自定义应用栏的任何地方导入文件，然后在脚手架中您可以像使用常规应用栏一样使用它

import 'YOUR DIRECTORY/CustomAppBar.dart';

Scaffold(
  appBar: CustomAppBar('your title here'),
)

Answer 2

将leading IconButton 添加到您的AppBar，按下时调用Navigator.pop()。这会将用户返回到最后一页：

AppBar(
    leading: IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () => Navigator.pop(context),
    ),
    title: Text('AppBar'),
),

请记住，页面存储在视图堆栈中。当您使用Navigator.pushNamed() 推送页面时，您正在将该页面添加到初始页面之上。因此，一个简单的pop 将返回首页。

this Flutter Cookbook recipe 中也对此进行了说明。

另外，如果你直接导航到一个路由而不先访问初始页面，初始页面仍然会被推送。正如documentation for the initialRoute property of MaterialApp 所说：

如果路由名称以斜杠开头，则将其视为“深层链接”，并且在推送该路由之前，还会推送指向该路由的路由。例如，如果路由是 /a/b/c，那么应用程序将按顺序加载四个路由 /、/a、/a/b 和 /a/b/c。即使路由只是 /a，应用程序也会以加载 / 和 /a 开头。

如果您对路由有任何其他问题，请随时与我联系。