Question

任何人都请提供一些信息为什么会发生这种情况？

当我尝试添加实现 appBar 抖动的类 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

Scaffold要求将实现PreferredSizeWidget的类作为appbar

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

Answer 2

在不搜索任何其他主题的情况下实施该操作的有用提示：

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

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

Answer 3

如果出现错误

不能将参数类型x分配给参数类型 “ PreferredSizeWidget”。

只需将x包裹在PreferredSize小部件中即可。

示例：

appBar: AppBar(
    bottom: Column(
              children: <Widget>[
                new TabBar(
                  tabs: [
                    new Tab(icon: new Icon(Icons.directions_car)),
                    new Tab(icon: new Icon(Icons.directions_transit)),
                    new Tab(
                      icon: new Icon(Icons.airplanemode_active),
                    )
                  ],
                ),
              ],
            ),

这里出现错误：无法将参数类型“列”分配给参数类型“ PreferredSizeWidget”。

解决方案：

点击列

点击灯泡

选择用小部件换行

用PreferredSize替换小部件

添加PreferredSize属性，例如preferredSize：Size.fromHeight（100.0），

结果：

appBar: AppBar(
     bottom: PreferredSize(
              preferredSize: Size.fromHeight(100.0),
              child: Column(
                children: <Widget>[
                  new TabBar(
                    tabs: [
                      new Tab(icon: new Icon(Icons.directions_car)),
                      new Tab(icon: new Icon(Icons.directions_transit)),
                      new Tab(
                        icon: new Icon(Icons.airplanemode_active),
                      )
                    ],
                  ),
                ],
              ),
            ),

Answer 4

您还可以使用以下方法在单独的文件中设计应用栏，然后在整个应用中使用它。

Widget Custom_Appbar(){
  return AppBar(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(20))),
        title: Text(
          'Decimal to Binary & Vice Versa',
          style: TextStyle(fontWeight: FontWeight.w400, fontSize: 19),
        ));
}

然后像这样使用它

return Scaffold(
      appBar: Custom_Appbar(),
)

Answer 5

创建此类：

class CustomAppBar extends PreferredSize {
  @override
  Size get preferredSize => Size.fromHeight(100); // set height of your choice

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      alignment: Alignment.center,
      child: // widget implementation
    );
  }
}

用法：

Scaffold(
  appBar: CustomAppBar(),
)

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

5 个答案: