如何使用标题下方的图标制作AppBar？

Question

我想在IconButton的标题下面留一个AppBar。我尝试过Column，但在将所有项目居中放置并底部溢出时遇到了问题。

我的代码：

appBar: new AppBar(
    title: Column(
        children: <Widget>[
            new Text('App Title'),
            IconButton(
                icon: new Icon(new IconData(0xe902, fontFamily: 'Ionicons')),
                onPressed: () {},
            )
        ],
    ),
    centerTitle: true,
    actions: <Widget>[
        IconButton(
            icon: new Icon(new IconData(0xe906, fontFamily: 'Ionicons')),
            onPressed: () {},
        )
    ],
),

It should looks like this.

Answer 1

可能是this的副本。也许您可以尝试减小Text＆IconButton小部件的大小以避免溢出（看起来不太好），并在Column小部件中添加crossAxisAlignment: CrossAxisAlignment.center，以使Column的子级在其横轴上居中。

如果这些都不起作用，那么也许您可以构建自己的appbar小部件，因为一切都扑朔迷离。

Answer 2

您可以尝试

appBar: AppBar(
  centerTitle: true,
  title: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text("App Title"),
      GestureDetector(
        child: Icon(Icons.keyboard_arrow_down),
        onTap: () {
          // handle your click here
        },
      )
    ],
  ),
),

截屏：