提问人:Athul 提问时间:10/17/2023 更新时间:10/18/2023 访问量:44
Flutter 嵌套滚动视图占用底部不需要的空间
Flutter Nested scrollview taking unwanted space in the bottom
问:
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。然后网格视图只占用所需的空间。但是主滚动视图仍然存在问题。我还检查了删除 sliverAppBar。没用。
答:
0赞
Sayed Main Uddin
10/17/2023
#1
基架底部不需要的空间可能是由于 NestedScrollView 小部件的默认行为造成的,如果内容未完全占用可用空间,有时可能会导致额外的空间。
使用 Expanded 小部件包装 TabBarView:
SafeArea(
child: IndexedStack(
index: controller.tabIndex,
children: [
RecentChatPage(),
AllGroupPage(),
Friends(),
SettingsPage()
],)
),
我在我的仪表板中使用此代码,它是工作文件。您也可以遵循此结构。
评论
0赞
Athul
10/17/2023
使用扩展导致错误。我认为身体通常会像剩余填充物一样工作。
0赞
Sayed Main Uddin
10/18/2023
' SafeArea( 子: IndexedStack( 索引: tabIndex, 子: [ PostsViewInProfile(), PostsViewInProfile(), ],) ), ' 'var tabIndex=0;void changeTabIndex(int index){ setState((){ tabIndex=index;
0赞
Sayed Main Uddin
10/18/2023
试试这个。我已经测试了这个代码。
评论