flutter-sport/plugin/extended_nested_scroll_view-2.0.1

extended_nested_scroll_view

文档语言: English | 中文简体

扩展NestedScrollView来修复了下面的问题

1.pinned的Header的问题

2.body里面TabView列表滚动同步，互相影响的问题

3.下拉刷新不能工作

4.在NestedScrollView的body中不通过设置ScrollController(设置了会跟内部Controller冲突)来完成下拉刷新，增量加载，滚动到顶部

掘金

Web demo for ExtendedNestedScrollView

• extended_nested_scroll_view
• Example for issue 1
• Example for issue 2
  • 步骤1
  • 步骤2
• Example for NestedScrollView pull to refresh

• Do without ScrollController in NestedScrollView's body

  Example for issue 1

在pinnedHeaderSliverHeightBuilder回调中设置全部pinned的header的高度， demo里面高度为 状态栏高度+SliverAppbar的高度

 var tabBarHeight = primaryTabBar.preferredSize.height;
      var pinnedHeaderHeight =
          //statusBar height
          statusBarHeight +
              //pinned SliverAppBar height in header
              kToolbarHeight;

 return NestedScrollView(
        pinnedHeaderSliverHeightBuilder: () {
          return pinnedHeaderHeight;
        },
       

Example for issue 2

步骤1

TabbarView里面的列表，使用NestedScrollViewInnerScrollPositionKeyWidget包住，并且设置唯一key， 这个key跟列表是第几个tab有关系。

 return extended.NestedScrollViewInnerScrollPositionKeyWidget(
        widget.tabKey,
        ListView.builder(
            itemBuilder: (c, i) {
              return Container(
                alignment: Alignment.center,
                height: 60.0,
                child: Text(widget.tabKey.toString() + ": List$i"),
              );
            },
            itemCount: 100)
        );

步骤2

innerScrollPositionKeyBuilder回调中给出当前tab的key. 这个key应该跟第一步中相同

 extended.NestedScrollView(
        innerScrollPositionKeyBuilder: () {
          var index = "Tab";
          if (primaryTC.index == 0) {
            index +=
                (primaryTC.index.toString() + secondaryTC.index.toString());
          } else {
            index += primaryTC.index.toString();
          }
          return Key(index);
        },

Example for NestedScrollView pull to refresh

NestedScrollViewRefreshIndicator is as the same as Flutter RefreshIndicator.

 NestedScrollViewRefreshIndicator(
       onRefresh: onRefresh,
       child: extended.NestedScrollView(
         headerSliverBuilder: (c, f) {
           return _buildSliverHeader(primaryTabBar);
         },

建议使用这个来做NestedScrollView的整体下拉刷新

Please see the example app of this for a full example.

Do without ScrollController in NestedScrollView's body

因为无法给NestedScrollView的body中的列表设置ScrollController(这样会破坏NestedScrollView内部的InnerScrollController的行为)，所以我这里给大家提供了Demos来展示怎么不通过ScrollController来完成

• 下拉刷新,

• 增量加载

• 滚动到顶部

• 动态改变PinnedHeaderHeight

☕️Buy me a coffee