Flutter：如何缩小SortAndFilterRow与LibraryTabScreen的间距？

在Flutter项目中使用自定义AppBar和PageView布局，想要缩小SortAndFilterRow组件与LibraryTabScreen之间的间距。已排查确认未设置额外的padding、margin属性，尝试用Flexible替换Expanded包裹PageView也无法解决问题。

相关代码 #

LibraryScreen 页面代码

import 'package:feauthor/LibraryScreen/LibraryTabScreen.dart';
import 'package:feauthor/LibraryScreen/SortAndFilterRow.dart';
import 'package:feauthor/MainScreen/MainScreen.dart';
import 'package:flutter/material.dart';

class LibraryScreen extends StatefulWidget {
  const LibraryScreen({super.key});

  @override
  _LibraryScreenState createState() => _LibraryScreenState();
}

class _LibraryScreenState extends State<LibraryScreen> {
  PageController _pageController = PageController();
  int _selectedIndex = 0;

  void _onPageChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onTabTapped(int index) {
    _pageController.animateToPage(
      index,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF4F4F4),
      body: Column(
        children: [
          SizedBox(height: 40), // 适配状态栏高度
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  onTap: () => _onTabTapped(0),
                  child: Text(
                    'KUTUPHANEM',
                    style: TextStyle(
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                      color: _selectedIndex == 0 ? Colors.black : Color(0xFFC8C8C8),
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () => _onTabTapped(1),
                  child: Text(
                    'INDIRILENLER',
                    style: TextStyle(
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                      color: _selectedIndex == 1 ? Colors.black : Color(0xFFC8C8C8),
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 24),
          Padding(
            padding: const EdgeInsets.only(left: 20, right: 20),
            child: SortAndFilterRow(),
          ),
          Expanded(
            child: PageView(
              controller: _pageController,
              onPageChanged: _onPageChanged,
              children: [
                LibraryTabScreen(),
                Center(child: Text('İndirilenler İçeriği')),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
}

void main() => runApp(MaterialApp(
  home: LibraryScreen(),
));

LibraryTabScreen 页面代码

import 'package:flutter/material.dart';

class LibraryTabScreen extends StatefulWidget {
  const LibraryTabScreen({super.key});

  @override
  State<LibraryTabScreen> createState() => _LibraryTabScreenState();
}

class _LibraryTabScreenState extends State<LibraryTabScreen> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height * 0.7326, // 固定高度
          child: ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: 20,
            itemBuilder: (context, index) {
              return Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Color(0xFF7A7A7A)),
                    top: index == 0 ? BorderSide(color: Color(0xFF7A7A7A)) : BorderSide.none,
                  ),
                ),
                child: Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 12),
                      child: SizedBox(
                        width: 56,
                        height: 87,
                        child: Image.asset(
                          'assets/images/examplebook.jpg',
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                    SizedBox(width: 12),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Text(
                              "WHAT WE SET IN MOTION",
                              style: TextStyle(
                                fontFamily: 'Roboto',
                                fontWeight: FontWeight.bold,
                                fontSize: 20,
                                color: Color(0xFF000000),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 12),
                        Row(
                          children: [
                            Text(
                              "STEPHANİE AUSTİN EDWARDS",
                              style: TextStyle(
                                fontFamily: 'Roboto',
                                fontWeight: FontWeight.normal,
                                fontSize: 15,
                                color: Color(0xFF000000),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 24),
                        Row(
                          children: [
                            Text("Sayfa"),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

SortAndFilterRow 代码

class SortAndFilterRow extends StatefulWidget {
  const SortAndFilterRow({super.key});

  @override
  State<SortAndFilterRow> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<SortAndFilterRow> {
  @override
  Widget build(BuildContext context) {
    return  Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Icon(Icons.filter_list_sharp, color: Colors.black, size: 30),
                    
                    TextButton(
                      onPressed: () {
                        // 筛选操作
                      },
                      child: const Text(
                        "Filtrele",
                        style: TextStyle(
                          fontFamily: 'Roboto',
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: Color(0xFF000000),
                        ),
                      ),
                    ),
                  ],
                ),
                Row(
                  
                  children: [
                    Icon(Icons.sort, color: Colors.black, size: 30),
                    TextButton(
                      onPressed: () {
                        // 排序操作
                      },
                      child: const Text(
                        "Sırala",
                        style: TextStyle(
                          fontFamily: 'Roboto',
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: Color(0xFF000000),
                        ),
                      ),
                    ),
                  ],
                )
              ],
            );
  }
}

界面截图 #

解决方案 #

问题出在LibraryTabScreen中使用了固定高度的SizedBox包裹ListView，这个固定高度值（MediaQuery.of(context).size.height * 0.7326）与PageView分配的可用空间不匹配，导致顶部出现多余间距。

修改LibraryTabScreen的代码，去掉固定高度的SizedBox，让ListView直接占据PageView提供的全部可用空间：

import 'package:flutter/material.dart';

class LibraryTabScreen extends StatefulWidget {
  const LibraryTabScreen({super.key});

  @override
  State<LibraryTabScreen> createState() => _LibraryTabScreenState();
}

class _LibraryTabScreenState extends State<LibraryTabScreen> {
  @override
  Widget build(BuildContext context) {
    // 直接返回ListView，去掉外层的Column和固定高度SizedBox
    return ListView.builder(
      scrollDirection: Axis.vertical,
      itemCount: 20,
      itemBuilder: (context, index) {
        return Container(
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(color: Color(0xFF7A7A7A)),
              top: index == 0 ? BorderSide(color: Color(0xFF7A7A7A)) : BorderSide.none,
            ),
          ),
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 12),
                child: SizedBox(
                  width: 56,
                  height: 87,
                  child: Image.asset(
                    'assets/images/examplebook.jpg',
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              SizedBox(width: 12),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        "WHAT WE SET IN MOTION",
                        style: TextStyle(
                          fontFamily: 'Roboto',
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: Color(0xFF000000),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 12),
                  Row(
                    children: [
                      Text(
                        "STEPHANİE AUSTİN EDWARDS",
                        style: TextStyle(
                          fontFamily: 'Roboto',
                          fontWeight: FontWeight.normal,
                          fontSize: 15,
                          color: Color(0xFF000000),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 24),
                  Row(
                    children: [
                      Text("Sayfa"),
                    ],
                  ),
                ],
              ),
            ],
          ),
        );
      },
    );
  }
}

如果后续需要在LibraryTabScreen中添加其他组件，也可以保留外层Column，但用Expanded包裹ListView，确保它占据剩余空间：

return Column(
  children: [
    // 其他组件
    Expanded(
      child: ListView.builder(...),
    ),
  ],
);

这样修改后，SortAndFilterRow与LibraryTabScreen之间的多余间距就会消失，布局会紧凑对齐。

内容的提问来源于stack exchange，提问作者Yasin G.