AppBarDesign 无法分配给参数类型“PreferredSizeWidget”

Posted

技术标签:

【中文标题】AppBarDesign 无法分配给参数类型“PreferredSizeWidget”【英文标题】:The AppBarDesign can't be assigned to the parameter type 'PreferredSizeWidget' 【发布时间】:2019-03-11 17:16:40 【问题描述】:

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

当我尝试添加实现 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),
        );
      
    

【问题讨论】:

当我添加 appBar : appBar();它运行良好。当我向它添加一个类时,它只会引发错误。 【参考方案1】:

在不搜索任何其他主题的情况下实现该功能的有用提示:

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

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

【讨论】:

with 和 implements 都可以使用class ApplicationToolbar extends StatelessWidget implements PreferredSizeWidget ... 从哪里得到preferredSize 属性值? @NimishDavidMathew 来自:Size.fromHeight(kToolbarHeight)【参考方案2】:

Scaffold 需要一个实现PreferredSizeWidget 的类作为appbar

将您的自定义应用栏包装成PreferredSize

Scaffold(
  appBar: PreferredSize(
    preferredSize: const Size.fromHeight(100),
    child: Container(color: Colors.red),
  ),
)

或实现PreferredSizeWidget:

Scaffold(
  appBar: MyAppBar(),
)

...

class MyAppBar extends StatelessWidget implements PreferredSizeWidget 
  @override
  Size get preferredSize => const Size.fromHeight(100);

  @override
  Widget build(BuildContext context) 
    return Container(color: Colors.red);
  

【讨论】:

【参考方案3】:

截图:


创建这个类:

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'),
      ],
    ),
  ),
)

【讨论】:

自从他们添加了null safety 这就是抛出各种错误! :( @Anoop.P.A 将代码更新为空安全。【参考方案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(),
)

【讨论】:

【参考方案5】:

如果你得到错误

参数类型 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),
                      )
                    ],
                  ),
                ],
              ),
            ),

【讨论】:

以上是关于AppBarDesign 无法分配给参数类型“PreferredSizeWidget”的主要内容,如果未能解决你的问题,请参考以下文章

错误:无法将参数类型“MaterialAccentColor”分配给参数类型“MaterialColor”

错误:无法将参数类型“String”分配给参数类型“Uri”。 'Uri'来自'dart:core' [重复]

错误:参数类型“TextEditingController”无法分配给参数类型“String”。在 FLUTTER

如何修复 Flutter 中的“参数类型 'Future<int>' 无法分配给参数类型 'int'”

错误:无法将参数类型“void Function(ImageInfo, bool)”分配给参数类型“ImageStreamListener”

颤振错误:参数类型“列表<动态>?”无法分配给参数类型'List<Movie>' [关闭]