如何在标题下方制作带有图标的 AppBar？答案

【问题标题】：How to make AppBar with Icon below title?如何在标题下方制作带有图标的 AppBar？
【发布时间】：2019-05-23 01:18:08
【问题描述】：

我想在AppBar 的标题下方有一个IconButton。我尝试了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.

【问题讨论】：

标签： flutter

【解决方案1】：

你可以试试这个

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

截图：

【讨论】：

【解决方案2】：

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

如果这些都不起作用，也许您可以构建自己的 appbar 小部件，因为一切都是 Flutter 上的小部件..

【讨论】：