Flutter.. 如何实现自定义 App Bar - Usage and Re-Usage答案

【问题标题】：Flutter.. How to implement a Custom App Bar - Usage and Re-UsageFlutter.. 如何实现自定义 App Bar - Usage and Re-Usage
【发布时间】：2020-10-15 06:16:18
【问题描述】：

我为我的 Flutter 移动应用创建了一个自定义应用栏 (CAB)，它应该出现在每个页面的顶部。现在整个代码被复制/粘贴在每一页上。但是有没有一种方法可以创建一次 CAB 组件并将其作为独立组件放置在每个页面上，这样如果我想对 CAB 进行更改，我就不必一遍又一遍地执行相同的编辑CAB 出现的页面？只是想稍微整理一下。谢谢！

【问题讨论】：

是的，我建议创建一个根文件夹来放置您希望在整个应用程序中重复使用的任何小部件。在该文件夹中，您应该有一个 appBar 文件，例如：AppBar exampleAppBar(BuildContext context) {} 然后无论您想使用它，您都可以这样做：return Scaffold( appBar: exampleAppBar(context),...
嘿伙计，有一篇非常好的文章发表在 Medium - check it here
感谢您的建议！我会尽快研究这个

标签： flutter dart appbar flutter-appbar

【解决方案1】：

要制作您的自定义 Appbar，您需要实现 PreferredSizeWidget，因为 AppBar 本身实现了它。

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
final String screenTitle;

MyAppBar({@required this.screenTitle});

@override
Widget build(BuildContext context) {
  return AppBar(
    title: Text(screenTitle),
    actions: // Whatever you need
  );
}

@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

您还需要覆盖 get preferredSize 并指定一个高度。在这个例子中，我使用了 Flutter 已经指定的常量 56.0 作为 AppBar 的工具栏组件。

【讨论】：

可以支持Size获取preferredSize => Size.fromHeight(kToolbarHeight);完美运行