Flutter Web：SingleChildScrollView+ScrollController窗口缩放页面回顶问题

核心问题原因 #

Flutter Web在浏览器窗口尺寸变化时，SingleChildScrollView的视口会重新计算布局，默认行为会将滚动位置重置到顶部。而且ScrollController的滚动监听器只会响应用户主动滚动操作，不会触发窗口resize事件，导致无法直接通过监听器捕获尺寸变化来保存偏移量。

可行解决方案 #

方案1：自定义ScrollBehavior（推荐，无闪烁）

通过自定义ScrollBehavior，覆盖updateScrollPositionForNewDimensions方法，强制保持原有的滚动比例（而非固定偏移量），这样在窗口缩放时滚动位置会按比例适配新的视口，不会跳回顶部也不会有闪烁。

class KeepScrollPositionBehavior extends ScrollBehavior {
  @override
  ScrollPosition createScrollPosition(
    ScrollPhysics physics,
    ScrollContext context,
    ScrollPosition? oldPosition,
  ) {
    return _KeepScrollPositionScrollPosition(
      physics: physics,
      context: context,
      oldPosition: oldPosition,
    );
  }
}

class _KeepScrollPositionScrollPosition extends ScrollPositionWithSingleContext {
  _KeepScrollPositionScrollPosition({
    required super.physics,
    required super.context,
    super.oldPosition,
  });

  @override
  void updateScrollPositionForNewDimensions({
    required double oldViewportDimension,
    required double newViewportDimension,
  }) {
    // 保持滚动比例，而非重置到顶部
    final double scrollRatio = pixels / (maxScrollExtent - viewportDimension);
    super.updateScrollPositionForNewDimensions(
      oldViewportDimension: oldViewportDimension,
      newViewportDimension: newViewportDimension,
    );
    final double newPixels = scrollRatio * (maxScrollExtent - newViewportDimension);
    jumpTo(newPixels.clamp(minScrollExtent, maxScrollExtent));
  }
}

使用方式：在MaterialApp或Scaffold中应用这个行为：

MaterialApp(
  scrollBehavior: KeepScrollPositionBehavior(),
  // ...其他配置
)

方案2：结合LayoutBuilder与GetX状态管理（无闪烁）

利用LayoutBuilder监听视口尺寸变化，在尺寸改变时主动保存并恢复滚动位置，结合GetX的响应式状态避免不必要的重建和闪烁。

修改GetX控制器：

class HomePageScrollControllerX extends GetxController {
  late ScrollController scrollController;
  final RxDouble _scrollOffset = 0.0.obs;
  double get scrollOffset => _scrollOffset.value;

  @override
  void onInit() {
    super.onInit();
    scrollController = ScrollController(
      initialScrollOffset: 0.0,
      keepScrollOffset: true,
    )..addListener(() {
        // 保存用户主动滚动的偏移量
        _scrollOffset.value = scrollController.offset;
      });
  }

  // 处理窗口尺寸变化，恢复滚动位置
  void handleViewportResize(double newViewportHeight) {
    if (!scrollController.hasClients) return;
    final maxExtent = scrollController.position.maxScrollExtent;
    final newOffset = _scrollOffset.value.clamp(0.0, maxExtent);
    // 使用jumpTo而非animateTo，避免动画闪烁
    scrollController.jumpTo(newOffset);
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }
}

在页面中使用LayoutBuilder：

@override
Widget build(BuildContext context) {
  final controller = Get.find<HomePageScrollControllerX>();
  return Scaffold(
    color: Colors.white,
    body: LayoutBuilder(
      builder: (context, constraints) {
        // 每次尺寸变化时触发恢复逻辑
        WidgetsBinding.instance.addPostFrameCallback((_) {
          controller.handleViewportResize(constraints.maxHeight);
        });
        return SingleChildScrollView(
          controller: controller.scrollController,
          primary: false,
          child: Column(
            children: [
              SizedBox(width: 150, height: 3000),
            ],
          ),
        );
      },
    ),
  );
}

方案3：修复原有延迟执行的闪烁问题

如果你坚持使用原有思路，可将Future.delayed(Duration.zero)替换为WidgetsBinding.instance.addPostFrameCallback，并在恢复位置前先判断尺寸是否真的变化，避免不必要的跳转：

@override
Widget build(BuildContext context) {
  final controller = Get.find<HomePageScrollControllerX>();
  final currentWidth = MediaQuery.of(context).size.width;
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // 仅当宽度真的变化时才执行恢复
    if (controller.lastWindowWidth != currentWidth) {
      controller.setWindowWithAndScroll(currentWidth);
    }
  });
  return PreferredScaffold(
    color: Colors.white,
    body: SingleChildScrollView(
      controller: controller.scrollController,
      // ...其他组件
    ),
  );
}

同时在GetX控制器中添加lastWindowWidth变量记录上次宽度，避免重复触发。

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