5

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

4

3 回答 3

6

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

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

于 2020-07-03T05:19:59.253 回答
1

我一直在寻找这个问题，我找到了使用NestedScrollView和插件SliverStickyHeader的解决方案

这是我的做法，

Scaffold(
  body: SafeArea(
    child: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverStickyHeader(
            sticky: false,
            header: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  TextField(
                    decoration: InputDecoration(
                        hintText: 'Search', prefixIcon: Icon(Icons.search)),
                  ),
                  Container(
                    height: kToolbarHeight,
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context, i) {
                        return Center(
                          child: Container(
                            padding: EdgeInsets.all(8.0),
                            margin: EdgeInsets.symmetric(horizontal: 4.0),
                            decoration: BoxDecoration(
                              color: Theme.of(context)
                                  .primaryColor
                                  .withOpacity(0.5),
                              borderRadius: BorderRadius.circular(25.0),
                            ),
                            child: Row(
                              children: [
                                Text(
                                  'Tag $i',
                                  style: TextStyle(
                                    color: Colors.white,
                                  ),
                                ),
                                SizedBox(width: 8.0),
                                CircleAvatar(
                                  radius: 25.0 / 2,
                                  child: Icon(Icons.close),
                                )
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          )
        ];
      },
      body: ListView.builder(itemBuilder: (context, i) {
        return ListTile(
          leading: CircleAvatar(child: Text('$i')),
          title: Text('Appbar with dynamic height'),
        );
      }),
    ),
  ),
);

它满足了我的要求，插件也支持完整的 Sliver 功能，但我只将它用作标题。我希望它会有所帮助。

于 2021-11-19T05:11:42.873 回答
0

我遇到了同样的问题，我想显示搜索以及不滚动正文内容的过滤器，即它固定在顶部并且结果是可滚动的。

而是使用我完成以下操作的 AppBar，

Scaffold(
  body: Column(
    children: [
      _buildSearchHeader(),
      Expanded(
        child: ListView(
          children: [
              _buildSearchProductResult()
          ],
        ),
      ),
    ],
  )

在_buildSearchHeader() 中，我声明了我的应用栏内容。

SafeArea(
  child: Container(
    margin: EdgeInsets.fromLTRB(
        homePageMargin, homePageMargin, homePageMargin, 0),
    width: double.infinity,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Align(child: SectionTitle("Search", fontSize: 20),
            alignment: Alignment.centerLeft),
        SizedBox(height: 22),
        _buildSearchBox(), // search bar
        if(showSortSection) _buildSortSection() // sort section/ or any other 
      ],
    ),
  ),
);

现在我可以完美地创建动态显示和滚动选项。

注意：这可能不是完美的方法。如果任何开发人员知道更好的方法，请在这里告诉我。

于 2021-04-14T11:12:25.610 回答