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();
}
}