Flutter报错：类型‘Type’无法分配给参数类型‘PreferredSizeWidget?’解决

云原生阿岚

2026-8-18

解决AppBar单独文件调用的类型错误问题

这个报错的核心原因是：你给Scaffold的appBar参数传了自定义AppBar类的类型（比如MyAppBar），但该参数要求的是PreferredSizeWidget的实例对象，导致类型不匹配。

解决步骤及代码示例

1. 正确定义自定义AppBar

你有两种方式实现自定义AppBar，都要确保符合PreferredSizeWidget要求：

方式一：直接继承AppBar（推荐，因为AppBar本身已经实现了PreferredSizeWidget）

// my_app_bar.dart
import 'package:flutter/material.dart';

class MyAppBar extends AppBar {
  MyAppBar({super.key}) : super(
    title: const Text('我的自定义AppBar'),
    backgroundColor: Colors.deepPurple,
    elevation: 4,
  );
}

方式二：通过组合Widget实现，需手动实现PreferredSizeWidget接口

// my_custom_app_bar.dart
import 'package:flutter/material.dart';

class MyCustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  // 指定AppBar的高度，通常用系统默认的kToolbarHeight
  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  const MyCustomAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: const Text('组合式自定义AppBar'),
      centerTitle: true,
      leading: const Icon(Icons.menu),
    );
  }
}

2. 正确调用自定义AppBar

在主页面中调用时，必须创建类的实例（加()），而不是直接传类名：

// main.dart
import 'package:flutter/material.dart';
import 'my_app_bar.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // 正确写法：创建实例
        appBar: MyAppBar(),
        body: const Center(child: Text('页面内容')),
      ),
    );
  }
}