容器高度监听器
Container height listener
我正在尝试构建一个可重用的 searchBar,它可以放置在 listView 上。下面是它的外观示例
我已将 searchBar 绑定到 ScrollController,因此可以使用 AnimatedContainer 缩小容器的大小。
我遇到的问题是,在 opening/closing SearchBar 上,子窗口小部件不会正常 disappear/shrink 或重新出现。下面是一个示例。
我正在尝试对它们执行 AnimatedOpacity,但看起来我需要在容器本身上绑定一个 AnimationController 来监听高度。
我可以附上代码,但我想我的问题是采用的方法。
- 我在容器上尝试了 GlobalKey 但不是每个滚动事件都是
当我为容器的整个伸展设置动画时被捕获
拉了 50%(让它有一种啪啪的感觉)。
- 我尝试了 SizeChangedLayoutNotifier 并收到了通知,但是当我
将它绑定到 RenderObject 以查找大小,我得到“计划构建
帧期间”错误。
还有其他想法吗?
您可以按照本教程进行操作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));
},
),
);
我正在尝试构建一个可重用的 searchBar,它可以放置在 listView 上。下面是它的外观示例
我已将 searchBar 绑定到 ScrollController,因此可以使用 AnimatedContainer 缩小容器的大小。
我遇到的问题是,在 opening/closing SearchBar 上,子窗口小部件不会正常 disappear/shrink 或重新出现。下面是一个示例。
我正在尝试对它们执行 AnimatedOpacity,但看起来我需要在容器本身上绑定一个 AnimationController 来监听高度。
我可以附上代码,但我想我的问题是采用的方法。
- 我在容器上尝试了 GlobalKey 但不是每个滚动事件都是 当我为容器的整个伸展设置动画时被捕获 拉了 50%(让它有一种啪啪的感觉)。
- 我尝试了 SizeChangedLayoutNotifier 并收到了通知,但是当我 将它绑定到 RenderObject 以查找大小,我得到“计划构建 帧期间”错误。
还有其他想法吗?
您可以按照本教程进行操作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));
},
),
);