单独处理应用栏 [英] Handling the app bar separately
问题描述
我是扑扑和飞镖的新手。我正在尝试通过开发应用程序来学习两者。我参加了大胆的课程，但只提供了基础知识。我想知道的是，是否有可能单独处理appBar代码。
I'm new to flutter and dart. I am trying to learn both by developing an app. I have taken the udacity course but it only gave me the basics. What I want to know is if it is possible to handle the appBar code separately.
当前，这就是我所拥有的：
Currently, this is what I have:
class HomePage extends StatelessWidget {
HomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {
print('Pressed Menu');
},
),
title: new Text(title),
titleSpacing: 0.0,
actions: <Widget>[
new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Text(
'Firstname Lastname',
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
),
),
new Text("username@email.com",
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
)),
],
mainAxisAlignment: MainAxisAlignment.center,
),
new Padding(
padding: new EdgeInsets.all(8.0),
child: new Image.network(
'https://s5.postimg.cc/bycm2rrpz/71f3519243d136361d81df71724c60a0.png',
width: 42.0,
height: 42.0,
),
),
],
),
],
),
body: new Center(
child: Text('Hello World!'),
),
);
}
}
但是，我想单独处理appbar代码因为我相信它会进一步膨胀。我尝试过这样的事情：
However, I would like to handle the appbar code separately as I believe it can swell a bit more. I have tried something like this:
class HomePage extends StatelessWidget {
HomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: MyAppBar(),
body: new Center(
child: Text('Hello World!'),
),
);
}
}
class MyAppBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {
print('Pressed Menu');
},
),
title: new Text(title),
titleSpacing: 0.0,
actions: <Widget>[
new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Text(
'Firstname Lastname',
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
),
),
new Text("username@email.com",
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
)),
],
mainAxisAlignment: MainAxisAlignment.center,
),
new Padding(
padding: new EdgeInsets.all(8.0),
child: new Image.network(
'https://s5.postimg.cc/bycm2rrpz/71f3519243d136361d81df71724c60a0.png',
width: 42.0,
height: 42.0,
),
),
],
),
],
);
}
}
但随后我收到了此消息：
But then I'm getting this message:
参数类型'MyAppBar'不能分配给参数类型'PreferredSizeWidget'
The argument type 'MyAppBar' can't be assigned to the parameter type 'PreferredSizeWidget'
我有一种直觉，认为这可能是不可能的。就像我说的那样，我是扑扑和飞镖的新手，但我尝试在文档和其他文章中尝试都没有用。抱歉，这看起来很愚蠢。我真的很想让某人向我指出有关如何实现这种目标的文档（如果有的话）或任何可以帮助我更好地理解其工作原理的资源。
I have an intuition that this might not be possible. As I said, I'm new to flutter and dart and I have tried looking in the documentation and in other posts to no avail. Sorry if this seems stupid. I would just really like for someone to point me to the documentation, if there is any, on how to achieve this kind of things or any resource that can help me better understand how this works.
为您的亲切和宝贵的帮助，在此先感谢您！
For your kind and valuable help, many thanks in advance!
推荐答案
appBar 小部件必须实现 PreferredSizeWidget 类，因此您必须：
the appBar widget must implement the PreferredSizeWidget class so you have to :
class MyAppBar extends StatelessWidget implements PreferredSizeWidget
然后还必须实现此方法
Size get preferredSize => new Size.fromHeight(kToolbarHeight);
完整示例：
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
@override
Widget build(BuildContext context) {
return new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {
print('Pressed Menu');
},
),
title: new Text(title),
titleSpacing: 0.0,
actions: <Widget>[
new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Text(
'Firstname Lastname',
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
),
),
new Text("username@email.com",
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
)),
],
mainAxisAlignment: MainAxisAlignment.center,
),
new Padding(
padding: new EdgeInsets.all(8.0),
child: new Image.network(
'https://s5.postimg.cc/bycm2rrpz/71f3519243d136361d81df71724c60a0.png',
width: 42.0,
height: 42.0,
),
),
],
),
],
);
}
@override
Size get preferredSize => new Size.fromHeight(kToolbarHeight);
}
这篇关于单独处理应用栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
