NestedScrollview内部有一个SliverAppbar和sliverToBoxAdapter。在主体中,有一个tabbbarView包含一个gridview.builder。但它显示更多的空间在底部滚动时。但是当gridview的itemcount增加时,就没有多余的空间了。
Scaffold(
backgroundColor: Colors.transparent,
extendBody: true, //
body: FutureBuilder(
future: getUserProfileDetails(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(color: kIndigoColor),
);
} else if (snapshot.hasError) {
return Center(
child: Text('Error: ${snapshot.error}'),
);
}
if (!snapshot.hasData || snapshot.data == null) {
return const Center(
child: Text('No data available'),
);
}
var profileRef = snapshot.data['data']['profile'];
var authRef = snapshot.data['data'];
UserRegistrationModel userModel =
UserRegistrationModel.fromJson(authRef);
CreateProfileModel createProfileModel =
CreateProfileModel.fromJson(profileRef);
return SafeArea(
child: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverToBoxAdapter(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
//* <<<<<<<<<<<<<< Profile Top Box >>>>>>>>>>>>>>
ProfileTopBoxWidget(
profileModel: createProfileModel,
userModel: userModel,
),
const SizedBox(height: 15),
// ---- For following, Followers, Like section ----
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
followingSingleBox('Following', '10'),
verticalDivider(),
followingSingleBox('Followers', '20M'),
verticalDivider(),
followingSingleBox('Like', '50M'),
],
),
const SizedBox(height: 20),
],
),
),
// :::::::::::::::::::::: TABBAR :::::::::::::::::::::::
SliverAppBar(
pinned: true,
title: TabBar(
controller: _tabController,
labelColor: primaryColor,
unselectedLabelColor: kGreyColor,
dividerColor: Colors.transparent,
overlayColor:
MaterialStatePropertyAll(kGreyColor.shade100),
indicatorPadding:
EdgeInsets.symmetric(horizontal: width * 0.05),
indicatorWeight: 1.2,
indicatorColor: primaryColor,
indicatorSize: TabBarIndicatorSize.tab,
labelStyle: nTextStyle(fontSize: 14),
unselectedLabelStyle: nTextStyle(fontSize: 14),
labelPadding: const EdgeInsets.only(bottom: 8),
tabs: const [
Text(' All '),
Text(' Photos '),
Text(' Videos '),
], // tabs
),
),
],
body: TabBarView(
controller: _tabController,
children: const [
PostsViewInProfile(),
PostsViewInProfile(),
PostsViewInProfile(),
],
),
),
);
}),
),
class PostsViewInProfile extends StatelessWidget {
const PostsViewInProfile({super.key});
@override
Widget build(BuildContext context) {
return GridView.builder(
physics: const NeverScrollableScrollPhysics(), //todo
shrinkWrap: true,
padding: EdgeInsets.zero,
itemCount: 9,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.0, // controll height here
mainAxisSpacing: 8,
crossAxisSpacing: 8,
),
itemBuilder: (context, index) => Stack(
children: [
SizedBox(
height: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'assets/images/pro-view${index + 1}.jpeg',
fit: BoxFit.cover,
),
),
),
index % 2 == 0
? Positioned(
right: width * 0.015,
bottom: width * 0.01,
child: SvgPicture.asset('assets/icons/play.svg'),
)
: const SizedBox.shrink(),
// Positioned(
// left: width * 0.015,
// bottom: width * 0.01,
// child: Row(
// children: [
// Icon(
// Icons.visibility_outlined,
// color: kGreyColor.shade300,
// size: 20,
// ),
// SizedBox(width: width * 0.01),
// Text(
// '302K',
// style: TextStyle(fontSize: 12, color: kWhiteColor),
// ),
// ],
// ),
// )
],
),
);
}
}
我将gridview的填充更改为edgeInsets.Zero。我也检查了customScrollview。然后网格视图只需要空间。但主scrollview仍然有问题。我还检查了删除sliverAppBar。不起作用。
1条答案
按热度按时间odopli941#
Scaffold底部不需要的空间可能是由于NestedScrollView小部件的默认行为造成的,如果内容没有完全占用可用空间,有时会导致额外的空间。
使用扩展的小部件 Package TabBarView:
我在我的 Jmeter 板中使用此代码,它是工作文件。你也可以遵循这个结构。