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

问题描述

我正在尝试在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我在这里使用的小部件。所以我想知道是否还有其他选择？

标签： flutterautoresizeflutter-appbar

解决方案

没有简单的方法可以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水平滚动您的筹码。

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

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

问题描述

解决方案

推荐阅读