介绍

在使用Flutter开发应用时，经常会遇到这样的错误提示：参数类型“XXX”不能分配给参数类型“YYY”。这种错误通常是因为传入的参数类型与接收参数的类型不符。本文将以具体的例子来讲解这个错误的原因和解决方法。

错误示例

先看一下常见的错误示例：

class ChatRoomAppBar extends StatelessWidget implements PreferredSizeWidget {
  // ...
}

// ...

return Scaffold(
  appBar: ChatRoomAppBar(), // 这里会报错
  // ...
);

这段代码中，我们定义了一个自定义的ChatRoomAppBar组件，并将其用作Scaffold中的AppBar。但是在代码中，我们看到了一个红色波浪线，提示了以下错误内容：

The argument type 'ChatRoomAppBar' can't be assigned to the parameter type 'PreferredSizeWidget'.

意思是说，在这里期望传入的是PreferredSizeWidget类型的组件，但是我们传入的是ChatRoomAppBar类型的组件。这显然是一个类型不匹配的错误。

解决方法

接下来，我们来看看解决方法。

方法一：继承预设组件

首先是在组件中继承预设的组件，例如继承AppBar，这样我们的自定义组件就自动继承了PreferredSizeWidget类型，代码如下：

class ChatRoomAppBar extends AppBar {
  ChatRoomAppBar()
      : super(
          // ...
        );
}

// ...

return Scaffold(
  appBar: ChatRoomAppBar(), // 这里就不会报错了
  // ...
);

这里，我们将自定义的ChatRoomAppBar组件继承了AppBar，然后在构造函数中直接调用了AppBar的构造函数，将自定义的一些属性传递给它。

方法二：实现PreferredSizeWidget接口

第二种方法是手动实现PreferredSizeWidget接口。代码如下：

class ChatRoomAppBar extends StatelessWidget implements PreferredSizeWidget {
  ChatRoomAppBar({Key? key}) : preferredSize = Size.fromHeight(kToolbarHeight), super(key: key);

  @override
  final Size preferredSize;
  
  @override
  Widget build(BuildContext context) {
      // ...
  }
}

// ...

return Scaffold(
  appBar: ChatRoomAppBar(), // 这里也不会报错了
  // ...
);

这里，我们手动实现了PreferredSizeWidget接口，并在构造函数中初始化了preferredSize变量，即该组件的大小。这样我们的自定义组件也变成了一个PreferredSizeWidget类型的组件，可以成功传递给Scaffold中的appBar属性。