容器高度监听器

Posted 2023-02-23

【中文标题】容器高度监听器

【英文标题】：Container height listener

【发布时间】：2020-07-26 05:17:30

【问题描述】：

我正在尝试构建一个可以放置在 listView 上的可重复使用的 searchBar。下面是它的外观示例

我已将 searchBar 绑定到 ScrollController，因此可以使用 AnimatedContainer 缩小容器的大小。

我遇到的问题是，在打开/关闭 SearchBar 时，子小部件不会优雅地消失/缩小或重新出现。下面是一个示例。

我试图对它们做一个 AnimatedOpacity，但看起来我需要在容器本身上绑定一个 AnimationController 来监听高度。

我可以附上代码，但我猜我的问题是采取的方法。

我在容器上尝试了 GlobalKey，但不是每个滚动事件都是 当我为容器的整个伸展设置动画时被捕获 拉了 50%（给人一种快活的感觉）。 我尝试了 SizeChangedLayoutNotifier 并收到了通知，但是当我 将其绑定到 RenderObject 以查找大小，我得到“构建计划 帧期间”错误。

还有其他想法吗？

【问题讨论】：

我会建议使用 CustomScroll 的 Slivers。否则尝试通过这个：blog.smartnsoft.com/…

youtube.com/watch?v=FPcl1tu0gDs

我的 ListView 页面基于 Slivers。 SearchBar（一个可重复使用的有状态小部件）位于 SliverToBoxAdapter 中。 SearchBar 是一个带有 Row 元素的容器。

我已经在 pub.dev 中查看了可重复使用的 searchBars，例如 flappy，但它们都没有像 Whatsapp searchBar 或 ios 中默认邮件应用程序的 searchBar 的动画外观......打开并按下以快速关闭

如果你使用的是Sliver，使用这个属性：flexibleSpace 在弹性空间中，你可以放置你的widget。我也在应用程序中使用相同并且工作正常

【参考方案1】：

你可以按照这个教程https://www.youtube.com/watch?v=FPcl1tu0gDs

或

这是您预期结果的一个小例子：

SliverAppBar(
  expandedHeight: _width / 3.0,
  backgroundColor: Colors.white,
  leading: InkWell(
    onTap: () => Navigator.of(context).pop(),
    child: Container(
      alignment: Alignment.center,
      child: Container(
          width:  30,
          height: 30,
        alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          child: Icon(Icons.arrow_back,)),
    ),
  ),


  elevation: 0.1,

  title: Container(
    margin: EdgeInsets.only(
      left: 16,
    ),
    child: Text(
      "$widget.title",
      style: TextStyle(
          color: AppTheme.black, fontSize: 24, fontWeight: FontWeight.w600),
    ),
  ),



  floating: true,
  pinned: true,
  snap: false,
  stretch: true,
  centerTitle: false,

// here is custom app searcbar
  flexibleSpace: CustomSearchHeader(
    color: [
      AppTheme.white,
      AppTheme.white,
    ],
    context: context,
    width: _width,
    height: _height,
    onChange: (String value) 
      _jobBloc.add(SearchAddress(listData: _listData, query: value));
    ,
  ),
);

【参考方案2】：

感谢@Mateen， 您的回答让我知道我必须将高度更改传递给搜索小部件。

结果如下。

【讨论】：

快乐是我的，享受扑腾的调情。