单独处理应用栏

Question

我是新来的扑动和飞镖.我正在尝试通过开发应用程序来学习.我参加了udacity课程,但它只给了我基础知识.我想知道的是,是否可以单独处理appBar代码.

目前,这就是我所拥有的:

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代码,因为我相信它可以膨胀一点.我尝试过这样的事情:

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

但后来我收到了这条消息:

参数类型'MyAppBar'无法分配给参数类型'PreferredSizeWidget'

我有一种直觉认为这可能是不可能的.正如我所说,我是新手扑动和飞镖,我试图查看文档和其他帖子无济于事.对不起,如果这看起来很愚蠢.我真的希望有人指出我的文档,如果有的话,如何实现这种事情或任何资源,可以帮助我更好地理解这是如何工作的.

为了您的善意和宝贵的帮助,非常感谢您提前!

Answer 1

该appBar插件必须实现的PreferredSizeWidget,所以你必须类:

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