如何根据 Flutter 中的 AppBar 内容在运行时动态更改 AppBar 高度？

Question

我想实现一个flutter_tagging内AppBar。我设法在TextField里面添加标记AppBar并使用以下代码调整AppBarusingPreferredSize小部件的大小：

return PreferredSize(
    preferredSize: Size.fromHeight(110),
    child: AppBar(
      backgroundColor: HexColor('171551'),
      leading: const BackButton(),
      flexibleSpace: Padding(
        padding: const EdgeInsets.only(top: 48.0, left: 10, right: 10),
        child: buildTaggedSearch(),
      ),
      title: Container(),
      actions: _buildActions(),
    ),
  );

这是结果：

我无法解决的问题是当用户输入太多标签并且标签转到第二​​行时会发生什么，这就是发生的情况：

我也是 Flutter 的新手，也许我错过了一些东西，但是我将如何解决这个问题并AppBar根据标签的内容调整大小。我在这里讨论了大部分关于 AppBar 调整大小的问题，所有这些都使用了PreferredSize我在这里使用的小部件。所以我想知道是否还有其他选择？

Answer 1

没有简单的方法可以AppBar在运行时更改高度。是的，您可以使用 将其设置为任何（固定）高度PreferredSize，但是一旦设置，您通常无法更改它。

即使你让你自己的类来扩展PreferredSize，它最终会是这样的：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(100); // fixed custom height

  @override
  Widget build(BuildContext context) {...}
}

这个preferredSizegetter 需要返回一个固定的大小。它的父小部件 ( Scaffold) 真的想知道应用栏的高度，所以它知道从哪里开始渲染它的主体。

如果您将上面的“CustomAppBar”更改为Stateful，您将很快意识到preferredSize您必须覆盖的是 Widget 的一部分而不是 State。

如果你做了某种黑客攻击，比如使用全局变量来“欺骗”它：

Size get preferredSize => Size.fromHeight(myAppBarHeight); // global variable

更改 中的值后myAppBarHeight，应用栏仍保持其旧高度。您必须使用 调用setState小部件Scaffold才能重绘应用栏，更重要的是，在不同的位置重绘 Scaffold 主体。

所以实际上，解决方案可能是在Scaffold级别控制应用栏高度。

或者你应该看看SliverAppBar。

或者不要尝试在运行时更改应用栏高度，例如，使用 aListView水平滚动您的筹码。

或者构建您自己的小部件而不使用应用栏。