Flutter嵌套滚动视图在底部占用不需要的空间

gopyfrb3  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(154)

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。不起作用。

odopli94

odopli941#

Scaffold底部不需要的空间可能是由于NestedScrollView小部件的默认行为造成的,如果内容没有完全占用可用空间,有时会导致额外的空间。
使用扩展的小部件 Package TabBarView:

SafeArea(
              child: IndexedStack(
            index: controller.tabIndex,
            children: [
              RecentChatPage(),
              AllGroupPage(),
              Friends(),
              SettingsPage()
            ],)
          ),

我在我的 Jmeter 板中使用此代码,它是工作文件。你也可以遵循这个结构。

相关问题