peng8350 / flutter_pulltorefresh

a widget provided to the flutter scroll component drop-down refresh and pull up load.
MIT License
2.71k stars 722 forks source link

NestedScrollView-》TabBarView->SmartRefresher嵌套使用问题 #450

Open lyf571321556 opened 3 years ago

lyf571321556 commented 3 years ago

DefaultTabController->NestedScrollView->TabBarView->SmartRefresher在这种嵌套布局中,SmartRefresher同时指定了scrollController: _controller,primary: false,controller: _refreshController这三个属性会导致网上滚动列表的时候NestedScrollView的 headerSliverBuilder头部无法联动向上滚动。

sample code:

TabWithSmartRefresher1 extends StatefulWidget{
const TabWithSmartRefresher1() ;

  @override
  State<StatefulWidget> createState() {
    return _TabWithSmartRefresher1State();
  }
} 
class _TabWithSmartRefresher1State extends State<TabWithSmartRefresher1>
    with AutomaticKeepAliveClientMixin {
ScrollController _controller;
  RefreshController _refreshController;
  @override
  void initState() {
    super.initState();
    _controller = ScrollController();
    _refreshController = RefreshController(initialRefresh: false);
}
  @override
  bool get wantKeepAlive => true;
  @override
  Widget build(BuildContext context) {
    super.build(context);
return SmartRefresher(
              scrollController: _controller,
              primary: false,
              header: const ClassicHeader(),
              footer: const ClassicFooter(
                textStyle: TextStyle(color: OnesColors.lightGray),
              ),
              enablePullDown: true,
              enablePullUp: true,
              onRefresh: () {
              do something
              },
              onLoading: () {
                do something
              },
              child: content,
              controller: _refreshController,
            );
}
}
final tabs = [TabWithSmartRefresher1,TabWithSmartRefresher2,TabWithSmartRefresher3];
return DefaultTabController(
        length: tabs.length,
        child: NestedScrollView(
          controller: sc,
          headerSliverBuilder: (context, innerBoxIsScrolled) => [
            SliverList(
                delegate: SliverChildListDelegate([
              Container(
//                constraints: BoxConstraints.tightFor(width: double.infinity,height: 200),
                color: Theme.of(context).primaryColor,
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Container(
                          margin: const EdgeInsets.fromLTRB(16, 16, 16, 0),
                          child: Text(
                            task.name,
                            style: const TextStyle(
                                fontSize: 20,
                                height: 1.4,
                                fontWeight: FontWeight.w600,
                                color: OnesColors.primaryGray),
                          )),
                      Container(
                        margin: const EdgeInsets.fromLTRB(16, 2, 16, 16),
                        child: Text(
                          'long title',
                          style: const TextStyle(
                            color: OnesColors.heavyGray,
                            height: 1.4,
                            fontSize: 14,
                            fontWeight: FontWeight.normal,
                          ),
                        ),
                      ),
                    ]),
              ),
              Container(
                height: 8,
                color: OnesColors.background,
              )
            ])),
            SliverPersistentHeader(
              pinned: true,
              delegate:
                  PreferredSizePersistentHeaderDelegate(OnesTabBarContainer(
                TabBar(
                    controller: primaryTC,
                    labelStyle: const TextStyle(fontSize: 15),
                    indicatorWeight: 3,
                    labelPadding: const EdgeInsets.symmetric(horizontal: 16),
                    indicatorColor: OnesColors.primaryBlue,
                    indicatorPadding:
                        const EdgeInsets.symmetric(horizontal: 16),
                    unselectedLabelColor: OnesColors.secondaryGray,
                    labelColor: OnesColors.primaryBlue,
                    isScrollable: true,
                    tabs: List.generate(
                        tabs.length, (i) => Tab(child: tabs[i].title))),
                color: Colors.white,
              )),
            ),
          ],
          body: Builder(builder: (context) {
            return TabBarView(
                controller: primaryTC,
                children: List.generate(
                  tabs.length,
                  (tabIndex) => tabs[tabIndex].builder(context, tabIndex),
                ));
          }),
        ));

去掉scrollController: _controller,primary: false两个属性后,联动滚动恢复正常.

peng8350 commented 3 years ago

那是因为你CustomScrollView里scrollController作为PrimaryScrollController,导致没有联合NestedScrollView的PrimaryScrollController。另外,这不是本库相关的问题。