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

Question

我正在尝试实现 flutter_tagging里面AppBar .我设法添加了标签 TextField里面AppBar并调整 AppBar使用 PreferredSize使用以下代码的小部件:

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) {...}
}

这个 preferredSize getter 需要返回一个固定的大小。它的父部件 ( Scaffold) 真的想知道应用栏的高度，所以它知道从哪里开始渲染它的主体。
如果您将上面的“CustomAppBar”更改为 Stateful ，你会很快意识到 preferredSize您必须覆盖，是小部件的一部分而不是状态。
如果您进行某种黑客攻击，例如使用全局变量来“欺骗”它:

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

更改 myAppBarHeight 中的值后，应用栏仍然保持在原来的高度。您必须调用 setState在带有 Scaffold 的小部件上为了重绘app bar，更重要的是在不同的位置重绘Scaffold body。
所以真的，解决方案可能是在 Scaffold 处控制应用栏高度等级。
或者你应该看看 SliverAppBar .
或者不要尝试在运行时更改应用栏高度，例如，使用 ListView水平滚动您的筹码。
或者构建您自己的小部件而不使用应用栏。