Flutter给出了编译时错误：无法将AppBarDesign分配给参数类型'PreferredSizeWidget'

Question

任何人都请提供一些信息为什么会这样？

当我尝试添加实现appBar flutter 的类AppBarDesign时，出现以下错误。

错误：参数类型'AppBarDesign'无法分配给参数类型'PreferredSizeWidget'。（argument_type_not_assignable位于[flutterbyrajath] lib \ main.dart：27）

    import 'package:flutter/material.dart';

    main() {
      runApp(new MyApp());
    }

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Rajath\'s design ',
          debugShowCheckedModeBanner: false,
          theme: new ThemeData(primarySwatch: Colors.amber),
          home: new MyHomePage(key, 'App is Fun'),
        );
      }
    }

    class MyHomePage extends StatelessWidget {
      MyHomePage(Key key, this.title) : super(key: key);

      final title;

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBarDesign(key, title),
        );
      }
    }

    class AppBarDesign extends StatelessWidget {
      AppBarDesign(Key key, this.title) : super(key: key);

      final title;

      @override
      Widget build(BuildContext context) {
        return new AppBar(
          title: new Text(title),
        );
      }
    }

Answer 1

在不搜索任何其他主题的情况下实现此目的的有用提示：

class ApplicationToolbar extends StatelessWidget with PreferredSizeWidget{
  @override
  Widget build(BuildContext context) {
    return AppBar( ... );
  }

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

Answer 2

支架需要将实现PreferredSizeWidget的类作为appbar

将您的自定义应用栏包装到PreferredSize中，或实现PreferredSizeWidget

Answer 3

第一：实现你的类

implements PreferredSizeWidget

第二：输入高度

@override
Size get preferredSize => Size.fromHeight(AppBar().preferredSize.height);

Answer 4

截屏：

创建这个类：

class CustomAppBar extends PreferredSize {
  @override
  final Widget child;
  final double height;

  CustomAppBar({
    required this.height,
    required this.child,
  }) : super(child: child, preferredSize: Size.fromHeight(height));
}

用法：

appBar: CustomAppBar(
  height: 100,
  child: Container(
    color: Colors.red,
    child: Column(
      children: [
        Text('0'),
        Text('1'),
        Text('2'),
        Text('3'),
      ],
    ),
  ),
)