如何在多个屏幕之间共享一个 AppBar答案

【问题标题】：How to share an AppBar between multiple screens如何在多个屏幕之间共享一个 AppBar
【发布时间】：2021-05-01 01:56:23
【问题描述】：

我试图遵循@rmtmckenzie 对类似问题的回答中的解决方案 1 (Persisting AppBar Drawer across all Pages Flutter 但是当我尝试以下代码时，我收到错误 无法将参数类型“SaneAppBar”分配给参数类型'PreferredSizeWidget?'。因为我可以将不可为空的成员分配给可空的成员（例如字符串？=字符串），所以我不明白我做错了什么。也许这是你可以做的使用抽屉参数而不使用 appBar 参数？如果是这样，我将不胜感激任何关于我应该如何预先确定这一点的指针。我还想知道是否需要修改示例代码才能使用零安全环境？

sane_app_bar.dart：

import 'package:flutter/material.dart';
class SaneAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
        title: const Text('SANE Finder'),
        centerTitle: true,
      );
  }
}

我的屏幕小部件以这种方式使用：

class _WelcomeScreenState extends State<WelcomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SaneAppBar(),
      body: Padding(...

【问题讨论】：

标签： flutter dart

【解决方案1】：

我相信您的问题与 null 安全性无关。脚手架内的appBar 只接受PreferredSizeWidget 类型的小部件。您可以使用以下方法轻松将此行为添加到您的小部件。


// See that I have added: 'implements PreferredSizeWidget'.
class SaneAppBar extends StatelessWidget implements PreferredSizeWidget {

  // You also need to override the preferredSize attribute. 
  // You can set it to kToolbarHeight to get the default appBar height.
  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: const Text('SANE Finder'),
      centerTitle: true,
    );
  }
}

现在，您的小部件应该被接受为 Scaffold 的 appBar。

【讨论】：

【解决方案2】：

您是否尝试将其设置为变量？

AppBar myAppBar = Appbar(...)

如果您需要将标题作为参数传递，也可以作为返回函数

AppBar myAppBar(String title){
    return AppBar(...)
 }

如果您仍想使用有状态或无状态小部件，您需要将 PreferredSizeWidget 添加到类中，但您需要覆盖一件事：

class SaneAppBar extends StatelessWidget with PreferredSizeWidget{
     @override         
     Size get preferredSize => Size(screen.width, 75); 
}

【讨论】：