Flutter开发：移除SliverFillRemaining消除列表底部多余空白

你推测的原因完全正确——底部空白就是SliverFillRemaining造成的。这个组件的设计目的就是填充CustomScrollView中未被其他Sliver组件占用的剩余空间，所以当列表项数量少、内容高度不足时，它会强制占满屏幕剩下的区域，形成不必要的空白。

解决方案 #

直接移除两个Tab页面CustomScrollView中的SliverFillRemaining组件即可。修改后：

• 列表项较少时，CustomScrollView会自适应内容高度，底部不会出现多余空白；
• 列表项较多时，CustomScrollView依然保持正常的滚动功能。

修改后的代码片段 #

NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return [
              SliverToBoxAdapter(
                child: Padding(
                  padding: PaddingConstants.padAll16,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Available funds',
                        style: Theme.of(context)
                            .textTheme
                            .lightHeadingMedium
                            .copyWith(
                              fontFamily: AppFontFamily.semiBold,
                            ),
                      ),
                      Gap(8.h),
                      const AvailableFundsCard(
                        amount: 30.85,
                      ),
                      Text(
                        'History',
                        style: Theme.of(context)
                            .textTheme
                            .lightHeadingMedium
                            .copyWith(
                              fontFamily: AppFontFamily.semiBold,
                            ),
                      ),
                    ],
                  ),
                ),
              ),
              SliverPersistentHeader(
                pinned: true,
                delegate: _TabBarDelegate(
                  HistoryTabBar(context: context),
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              // Tab "As a Seller"
              CustomScrollView(
                slivers: [
                  SliverToBoxAdapter(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Showing results 1–${mockSellerHistoryData.length} of ${mockSellerHistoryData.length}',
                            style: Theme.of(context)
                                .textTheme
                                .lightBodyLargeMedium
                                .copyWith(
                                  color: AppColors.grey738093,
                                ),
                          ),
                          TextButton(
                            onPressed: () {},
                            child: Text(
                              'View all',
                              style: Theme.of(context)
                                  .textTheme
                                  .lightBodyMediumSemiBold
                                  .copyWith(
                                    color: AppColors.blue1877F2,
                                  ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (context, index) {
                        final data = mockSellerHistoryData[index];
                        return Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16.0),
                          child: Column(
                            children: [
                              HistoryCard(
                                status: data['status'],
                                date: data['date'],
                                amount: data['amount'],
                                paymentID: data['paymentID'],
                                onTap: () {},
                              ),
                              const Gap(14),
                            ],
                          ),
                        );
                      },
                      childCount: mockSellerHistoryData.length,
                    ),
                  ),
                  // 移除SliverFillRemaining
                ],
              ),

              // Tab "As a Buyer"
              CustomScrollView(
                slivers: [
                  SliverToBoxAdapter(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Showing results 1–${mockBuyerHistoryData.length} of ${mockBuyerHistoryData.length}',
                            style: Theme.of(context)
                                .textTheme
                                .lightBodyLargeMedium
                                .copyWith(
                                  color: AppColors.grey738093,
                                ),
                          ),
                          TextButton(
                            onPressed: () {},
                            child: Text(
                              'View all',
                              style: Theme.of(context)
                                  .textTheme
                                  .lightBodyMediumSemiBold
                                  .copyWith(
                                    color: AppColors.blue1877F2,
                                  ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (context, index) {
                        final data = mockBuyerHistoryData[index];
                        return Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16.0),
                          child: Column(
                            children: [
                              HistoryCard(
                                status: data['status'],
                                date: data['date'],
                                amount: data['amount'],
                                paymentID: data['paymentID'],
                                onTap: () {},
                              ),
                              const Gap(14),
                            ],
                          ),
                        );
                      },
                      childCount: mockBuyerHistoryData.length,
                    ),
                  ),
                  // 移除SliverFillRemaining
                ],
              ),
            ],
          ),
        ),

补充说明 #

如果后续需要在内容高度不足时添加底部固定元素（比如“加载更多”按钮），可以通过计算列表总高度与屏幕剩余高度的差值，动态决定是否添加占位或固定组件，但当前需求下，直接移除SliverFillRemaining就能完美解决问题。

内容的提问来源于stack exchange，提问作者CeleX