Flutter吸頂Tabbar+流式佈局

實現APP首頁tabbar滾動吸頂功能

首頁代碼：

           WillPopScope(
            child: Scaffold(
              backgroundColor: Colors.white,
              appBar: PreferredSize(
                preferredSize: Size(double.infinity, 0.w),
                child: AppBar(
                  backgroundColor: Colors.transparent,
                  shadowColor: Colors.transparent,
                  elevation: 0,
                  title: const Text(""),
                ),
              ),
              body: NestedScrollView(
                controller: scrollController,
                headerSliverBuilder:
                    (BuildContext context, bool innerBoxIsScrolled) {
                  return <Widget>[
                    buildHeaderWidget(), // tabbar上面被隱藏的部分
                    SliverOverlapAbsorber(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                          context),
                      sliver: SliverPersistentHeader(
                        pinned: true,
                        // floating: true,
                        delegate: StickyTabBarDelegate(
                          child: BrnTabBar(  //生成tabbar
                            controller: tabController,
                            tabs: tabs, 
                            showMore: true,
                            moreWindowText: "欄目總覽",
                            onTap: (state, index) {
                              state.refreshBadgeState(index);
                              // scrollController.animateTo(
                              //     globalKey.currentContext!.size!.height,
                              //     duration: Duration(milliseconds: 200),
                              //     curve: Curves.linear);
                            },
                            onMorePop: () {},
                            closeController: closeWindowController,
                          ),
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: SizedBox(
                        height: 60.w,
                      ),
                    )
                  ];
                },
                body: TabBarView(
                  controller: tabController,
                  children: catTabList.map<Widget>((e) {
                    return HomeArticlesListPage(e.id,
                        showTopContainer: showTopContainer);
                  }).toList(),
                ),

                //
              ),
            ),
            onWillPop: () {
              if (closeWindowController!.isShow) {
                closeWindowController!.closeMoreWindow();
                return Future.value(false);
              }
              return Future.value(true);
            },
          );

tabbar下 各頁面流式佈局代碼：

流式佈局使用的是 MasonryGridView.count()；
因為是要在tabbar下的頁面 所以 要關閉滾動 且不能綁定 controller；
綁定controller會導致 首頁有滾動事件滾動首頁部分
流式佈局組件滾動流式佈局的界面 然會吸頂 就會失效。

我一開始就犯了這個錯誤  雖然設置了 physics: const NeverScrollableScrollPhysics(),
讓流式佈局不滾動 但是忘記去除綁定的 controller 就導致吸頂的動畫出錯了。

import 'package:communityApp/app/router/routers.dart';
import 'package:communityApp/app/utils/local_storage.dart';
import 'package:communityApp/components/cache_Image_widget.dart';
import 'package:communityApp/home_system/request/homeRequest.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class HomeArticlesListPage extends StatefulWidget {
  final int activeCatId; //當前選擇的欄目ID
  Function? showTopContainer;
  HomeArticlesListPage(this.activeCatId, {Key? key, this.showTopContainer})
      : super(key: key);

  @override
  State<HomeArticlesListPage> createState() => _HomeArticlesListPageState();
}

class _HomeArticlesListPageState extends State<HomeArticlesListPage> {
  late ScrollController _scrollViewController;
  List _buildArticleList = []; // 瀑布留 數據列表
  bool _isOver = true; // 介面請求 防抖
  int _page = 1; //當前的頁數
  bool _haveMore = true; //是否有更多的數據

  @override
  void initState() {
    super.initState();

    _scrollViewController = ScrollController(initialScrollOffset: 0.w)
      ..addListener(() {
        // print(_scrollViewController.position.pixels);
        // if (_scrollViewController.position.pixels < 10) {
        //   widget.showTopContainer == null ? '' : widget.showTopContainer!(0.0);
        // } else {
        //   widget.showTopContainer == null ? '' : widget.showTopContainer!(-1.0);
        // }
        // 當滾動到最底部的時候，載入新的數據
        if (_scrollViewController.position.pixels ==
            _scrollViewController.position.maxScrollExtent) {
          //當還有更多數據的時候才會進行載入新數據
          if (_haveMore) {
            _getListViewList();
          }
        }
      });
    _getListViewList();
  }

  // 載入更多 數據
  void _getListViewList() async {
    if (!_isOver) return;
    _isOver = false;
    if (_haveMore) {
      var userId = await LocalStorage.get(LocalStorage.userId);
      var result = await HomeRequest.getArticleList({
        'userId': userId,
        'articleCatId': widget.activeCatId,
        'pageSize': 10,
        'pageNum': _page
      });
      _isOver = true;
      if (mounted) {
        setState(() {
          if (_page == 1) {
            _buildArticleList = result;
          } else {
            _buildArticleList.addAll(result);
          }
          if (result.length == 10) {
            _page++;
          } else if (result.length < 10) {
            _haveMore = false;
          }
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Container(
      padding: EdgeInsets.fromLTRB(20.w, 0.w, 20.w, 60.w),
      child: MasonryGridView.count(
        // controller: _scrollViewController,
        // 展示幾列
        crossAxisCount: 2,
        // 元素總個數
        itemCount: _buildArticleList.length,
        // 單個子元素
        itemBuilder: (BuildContext context, int index) {
          var item = _buildArticleList[index];
          var user = item['user'];
          return GestureDetector(
            onTap: () async {
              /* 跳轉 */
              if (item["type"] == 1) {
                /* 跳轉到動態 */
                var result = await Navigator.of(context).pushNamed(
                    CommunityAppRouter.articelDetailPage,
                    arguments: {"articleId": item["id"].toString()});
              } else {
                var result = await Navigator.of(context).pushNamed(
                    CommunityAppRouter.evaluationDetailPage,
                    arguments: {"articleId": item["id"].toString()});
              }
            },
            child: Container(
              child: Column(
                children: [
                  Container(
                    clipBehavior: Clip.hardEdge, //溢出隱藏c
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8.w),
                    ),
                    child: CaCheImageWidget(
                      item['frontCover'],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.all(8.w),
                    child: Text(
                      item['title'],
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                      style: TextStyle(
                        color: const Color.fromARGB(255, 0, 0, 0),
                        fontSize: 15.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.fromLTRB(8.w, 0, 8.w, 8.w),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          width: 110.w,
                          decoration: BoxDecoration(),
                          clipBehavior: Clip.hardEdge,
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              ClipOval(
                                child: CaCheImageWidget(
                                  user['picture'],
                                  width: 14.w,
                                  height: 14.w,
                                ),
                              ),
                              Container(
                                width: 90.w,
                                margin: EdgeInsets.only(left: 4.w),
                                child: Text(
                                  user['nickName'],
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: TextStyle(
                                    color: Color(0xFFB3BBBD),
                                    fontSize: 11.sp,
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          child: Text(
                            '${item['viewNum']}看過',
                            style: TextStyle(
                              color: const Color(0xFFB3BBBD),
                              fontSize: 11.w,
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
        // 縱向元素間距
        mainAxisSpacing: 10,
        // 橫向元素間距
        crossAxisSpacing: 10,
        //本身不滾動，讓外面的singlescrollview來滾動
        physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true, //收縮，讓元素寬度自適應
      ),
    );
  }

  @override
  void dispose() {
    _scrollViewController.dispose();
    super.dispose();
  }
}