Flutter页面切换时布局重叠问题求助及代码排查

问题现象 #

切换分类标签（或滑动商品列表页）时，页面内容会出现短暂重叠，在渲染目标分类内容前，错误地显示其他分类的布局。

问题根源 #

问题出在FoodListView组件的实现中：在通过category.map生成PageView子项时，所有列表都使用了category[selected]来获取当前分类数据，而非当前循环的分类e。这导致所有PageView页面都渲染了选中分类的内容，当selected状态变化时，所有子列表会同时重建，进而引发布局重叠闪烁。

修复方案 #

修改FoodListView中map循环的内容，将依赖selected的分类替换为当前循环的分类key：

修复后的FoodListView代码 #

class FoodListView extends StatelessWidget {
  final int selected;
  final void Function(int) callback;
  final PageController pageController;
  final Stall stall;

  const FoodListView({
    super.key,
    required this.selected,
    required this.callback,
    required this.pageController,
    required this.stall,
  });

  @override
  Widget build(BuildContext context) {
    final category = stall.menu.keys.toList();
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 25),
      child: PageView(
        controller: pageController,
        onPageChanged: callback,
        children: category
            .map((categoryKey) => ListView.separated(
                  padding: EdgeInsets.zero,
                  itemBuilder: (context, index) => GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => DetailPage(
                            stall.menu[categoryKey]![index],
                          ),
                        ),
                      );
                    },
                    child: FoodItem(stall.menu[categoryKey]![index]),
                  ),
                  separatorBuilder: (_, index) => const SizedBox(height: 15),
                  itemCount: stall.menu[categoryKey]!.length,
                ))
            .toList(),
      ),
    );
  }
}

额外优化建议 #

1. 明确函数类型：将原泛型Function替换为void Function(int)，提升代码类型安全性和可读性
2. 使用命名参数：将位置参数改为命名参数，避免因参数顺序错误引发的问题
3. 添加组件key：为StatelessWidget添加key，帮助Flutter更准确地识别组件状态

其他注意点 #

• 确保PageController在State中初始化（当前代码已正确实现），避免每次build重建控制器
• 若仍有轻微闪烁，可给PageView添加physics: const ClampingScrollPhysics()，或启用页面缓存（PageController(keepPage: true)）

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