實作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();
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/499212.html
標籤：其他