内容简介:接着上篇,没看上篇的小伙伴建议先看下上篇,免得断片中。。我继续讲下第2个问题的解决方案。
接着上篇,没看上篇的小伙伴建议先看下上篇,免得断片中。。
我继续讲下第2个问题的解决方案。
当在里面放上tabview,并且tab是缓存状态的时候,会出现滚动会互相影响的问题
上篇 我们说到 在我们的主角NestedScrollView当中,有2个ScrollController.
class _NestedScrollController extends ScrollController { _NestedScrollController( this.coordinator, { double initialScrollOffset = 0.0, String debugLabel, 复制代码
一个是inner,一个outer。 outer是负责headerSliverBuilder里面的滚动widgets inner是负责body里面的滚动widgets 当outer滚动到底了之后,就会看看inner里面是否有能滚动的东东,开始滚动
Tabview是在body里面,这里我们肯定需要对inner进行处理。 首先我们要明白,NestedScrollView是怎么处理outer和inner的关系的。
找到这个_NestedScrollCoordinator 的applyUserOffset方法中处理了整个NestedScrollView的滑动处理
@override void applyUserOffset(double delta) { updateUserScrollDirection(delta > 0.0 ? ScrollDirection.forward : ScrollDirection.reverse); assert(delta != 0.0); if (_innerPositions.isEmpty) { _outerPosition.applyFullDragUpdate(delta); } else if (delta < 0.0) { // dragging "up" // TODO(ianh): prioritize first getting rid of overscroll, and then the // outer view, so that the app bar will scroll out of the way asap. // Right now we ignore overscroll. This works fine on Android but looks // weird on iOS if you fling down then up. The problem is it's not at all // clear what this should do when you have multiple inner positions at // different levels of overscroll. final double innerDelta = _outerPosition.applyClampedDragUpdate(delta); if (innerDelta != 0.0) { for (_NestedScrollPosition position in _innerPositions) position.applyFullDragUpdate(innerDelta); } } else { // dragging "down" - delta is positive // prioritize the inner views, so that the inner content will move before the app bar grows double outerDelta = 0.0; // it will go positive if it changes final List<double> overscrolls = <double>[]; final List<_NestedScrollPosition> innerPositions = _innerPositions.toList(); for (_NestedScrollPosition position in innerPositions) { final double overscroll = position.applyClampedDragUpdate(delta); outerDelta = math.max(outerDelta, overscroll); overscrolls.add(overscroll); } if (outerDelta != 0.0) outerDelta -= _outerPosition.applyClampedDragUpdate(outerDelta); // now deal with any overscroll for (int i = 0; i < innerPositions.length; ++i) { final double remainingDelta = overscrolls[i] - outerDelta; if (remainingDelta > 0.0) innerPositions[i].applyFullDragUpdate(remainingDelta); } } } 复制代码
Iterable<_NestedScrollPosition> get _innerPositions { return _innerController.nestedPositions; } 复制代码
看到_innerPositions是我们要关注的东西,通过debug,我发现,如果tabview的每个tab做了缓存,那么每个tab里面列表的ScrollPosition将一直缓存在这个ScrollController里面。 当tab到tabview的某个tab的时候,ScrollController将会将这ScrollPosition attach 上,如果没有缓存,将会在离开的时候detach掉。
@override void attach(ScrollPosition position) { assert(position is _NestedScrollPosition); super.attach(position); coordinator.updateParent(); coordinator.updateCanDrag(); position.addListener(_scheduleUpdateShadow); _scheduleUpdateShadow(); } @override void detach(ScrollPosition position) { assert(position is _NestedScrollPosition); position.removeListener(_scheduleUpdateShadow); super.detach(position); _scheduleUpdateShadow(); } 复制代码
真相只有一个。。是的。。可以说。。造成缓存tabview的各个tab里面的列表互相影响的原因,是因为歪果仁说: as design(我就是这样设计的,不服吗).
按照我的思想啊,我滚动的时候。当然只想影响当前显示的这个列表啊。这不科学啊。。
找到原因找到原理,一切就都好解决了。现在的关键点在于,我怎么能知道显示对应的是哪个列表的?!
这个问题问了很多人。。也查找了好久都没找到好的方式去获取当前 激活的 列表对应的 ScrollPosition。。终于我只能想到一个 workaround。暂时解决这个问题。
提供一个容器,把inner里面的滚动列表包裹起来,并且设置它的tab 的唯一key
//pack your inner scrollables which are in NestedScrollView body //so that it can find the active scrollable //compare with NestedScrollViewInnerScrollPositionKeyBuilder class NestedScrollViewInnerScrollPositionKeyWidget extends StatefulWidget { final Key scrollPositionKey; final Widget child; NestedScrollViewInnerScrollPositionKeyWidget( this.scrollPositionKey, this.child); @override _NestedScrollViewInnerScrollPositionKeyWidgetState createState() => _NestedScrollViewInnerScrollPositionKeyWidgetState(); } class _NestedScrollViewInnerScrollPositionKeyWidgetState extends State<NestedScrollViewInnerScrollPositionKeyWidget> { @override Widget build(BuildContext context) { return widget.child; } // @override // void didChangeDependencies() { // // TODO: implement didChangeDependencies // //print("didChangeDependencies"+widget.scrollPositionKey.toString()); // super.didChangeDependencies(); // } // // @override // void didUpdateWidget(NestedScrollViewInnerScrollPositionKeyWidget oldWidget) { // // TODO: implement didUpdateWidget // //print("didUpdateWidget"+widget.scrollPositionKey.toString()+oldWidget.scrollPositionKey.toString()); // super.didUpdateWidget(oldWidget); // } } 复制代码
然后在刚才attach方法中通过先祖NestedScrollViewInnerScrollPositionKeyWidget
@override void attach(ScrollPosition position) { assert(position is _NestedScrollPosition); super.attach(position); attachScrollPositionKey(position as _NestedScrollPosition); coordinator.updateParent(); coordinator.updateCanDrag(); position.addListener(_scheduleUpdateShadow); _scheduleUpdateShadow(); } @override void detach(ScrollPosition position) { assert(position is _NestedScrollPosition); position.removeListener(_scheduleUpdateShadow); super.detach(position); detachScrollPositionKey(position as _NestedScrollPosition); _scheduleUpdateShadow(); } void attachScrollPositionKey(_NestedScrollPosition position) { if (position != null && scrollPositionKeyMap != null) { var key = position.setScrollPositionKey(); if (key != null) { if (!scrollPositionKeyMap.containsKey(key)) { scrollPositionKeyMap[key] = position; } else if (scrollPositionKeyMap[key] != position) { //in demo ,when tab to tab03, the tab02 key will be tab00 at first //then it become tab02. //this is not a good solution position.clearScrollPositionKey(); Future.delayed(Duration(milliseconds: 500), () { attachScrollPositionKey(position); }); } } } } void detachScrollPositionKey(_NestedScrollPosition position) { if (position != null && scrollPositionKeyMap != null && position.key != null && scrollPositionKeyMap.containsKey(position.key)) { scrollPositionKeyMap.remove(position.key); position.clearScrollPositionKey(); } } 复制代码
获取先祖NestedScrollViewInnerScrollPositionKeyWidget方法
Key setScrollPositionKey() { //if (haveDimensions) { final type = _typeOf<NestedScrollViewInnerScrollPositionKeyWidget>(); NestedScrollViewInnerScrollPositionKeyWidget keyWidget = (this.context as ScrollableState) ?.context ?.ancestorWidgetOfExactType(type); _key = keyWidget?.scrollPositionKey; return _key; } 复制代码
找到这个_NestedScrollCoordinator 的applyUserOffset方法中我们现在要替换掉 _innerPositions为_currentInnerPositions
Iterable<_NestedScrollPosition> get _innerPositions { //return _currentPositions; return _innerController.nestedPositions; } Iterable<_NestedScrollPosition> get _currentInnerPositions { return _innerController .getCurrentNestedPositions(innerScrollPositionKeyBuilder); } 复制代码
getCurrentNestedPositions里面的代码
Iterable<_NestedScrollPosition> getCurrentNestedPositions( NestedScrollViewInnerScrollPositionKeyBuilder innerScrollPositionKeyBuilder) { if (innerScrollPositionKeyBuilder != null && scrollPositionKeyMap.length > 1) { var key = innerScrollPositionKeyBuilder(); if (scrollPositionKeyMap.containsKey(key)) { return <_NestedScrollPosition>[scrollPositionKeyMap[key]]; } else { return nestedPositions; } } return nestedPositions; } 复制代码
SampeCode
extended.NestedScrollView( headerSliverBuilder: (c, f) { return _buildSliverHeader(primaryTabBar); }, // pinnedHeaderSliverHeightBuilder: () { return pinnedHeaderHeight; }, innerScrollPositionKeyBuilder: () { var index = "Tab"; if (primaryTC.index == 0) { index += (primaryTC.index.toString() + secondaryTC.index.toString()); } else { index += primaryTC.index.toString(); } return Key(index); }, 复制代码
这里由你自己协定tab key。。我这里是一级tab+二级tab的index。。比如 Tab00代表一级tab第一个下面的二级tab的第一个。
定义tab里面的列表的时候如下,比如第一个tab下面的二级tab的第一个列表,那么它的key 为Tab00.
return extended.NestedScrollViewInnerScrollPositionKeyWidget( Key("Tab00"), // myRefresh.RefreshIndicator( // child: ListView.builder( itemBuilder: (c, i) { return Container( //decoration: BoxDecoration(border: Border.all(color: Colors.orange,width: 1.0)), alignment: Alignment.center, height: 60.0, child: Text(widget.tabKey.toString() + ": List$i"), ); }, itemCount: 100) //, //onRefresh: onRefresh, // ) ); 复制代码
最后放上 Github extended_nested_scroll_view ,如果你有更好的方式解决这个问题或者有什么不明白的地方,都请告诉我,由衷感谢。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 一键同步vscode所有扩展,解决多个设备!
- 同步你 VSCode 设置及扩展插件,换机不用愁
- Defcon CTF Hotel_California非预期解题思路之事务同步扩展攻击
- 多人游戏的网络实现:帧同步和状态同步
- MySQL主从同步机制和同步延时问题追查
- 线程的三个同步器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Eloquent JavaScript
Marijn Haverbeke / No Starch Press / 2011-2-3 / USD 29.95
Eloquent JavaScript is a guide to JavaScript that focuses on good programming techniques rather than offering a mish-mash of cut-and-paste effects. The author teaches you how to leverage JavaScript's......一起来看看 《Eloquent JavaScript》 这本书的介绍吧!