不能将 AppBarDesign 分配给参数类型‘ PreferredSizeWidget’

有人能告诉我为什么会这样吗？

当我试图添加一个类 AppBarDesign，它实现 应用程序吧颤振是给出下面的错误。

错误: 参数类型‘ AppBarDesign’不能分配给参数类型‘ PreferredSizeWidget’

    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),
);
}
}
62658 次浏览
小开
最佳答案

Scaffold requires as appbar a class that implements PreferredSizeWidget

Either wrap your custom appbar into a PreferredSize

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

or implement 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);
}
}
小开

helpful tips to implementing that without searching any other topics:

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


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

You can also use following way to design your appbar in separate file and then use it in your whole app.

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),
));
}

And then use it like this

return Scaffold(
appBar: Custom_Appbar(),
)
小开

If you get the error

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

Just wrap x in the PreferredSize widget.

Example:

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

Here I get the error: The argument type 'Column' can't be assigned to the parameter type 'PreferredSizeWidget'.

Solution:

Click on Column

Click on light bulb

Choose Wrap with Widget

Replace widget with PreferredSize

Add a PreferredSize attribute, such as preferredSize: Size.fromHeight(100.0),

Result:

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),
)
],
),
],
),
),
小开

Screenshot:

enter image description here

Create this class:

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));
}

Usage:

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

First: implement your class

implements PreferredSizeWidget

Second: Enter Height

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

enter image description here


提交答案