dart - 单独处理应用栏

Question

我是 flutter 和 Dart 的新手。我正在尝试通过开发应用程序来学习两者。我参加了 udacity 类(class)，但它只给了我基础知识。我想知道的是是否可以单独处理 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,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

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

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

我有一种直觉，这可能是不可能的。正如我所说，我是 flutter 和 Dart 的新手，我尝试查看文档和其他帖子无济于事。对不起，如果这看起来很愚蠢。我真的很想有人指出我的文档，如果有的话，关于如何实现这种事情或任何可以帮助我更好地理解它是如何工作的资源。

感谢您的热心和宝贵帮助!

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