Flutter：多屏幕尺寸下Widget响应式位置的保存与恢复方案

你的核心问题是保存了绝对像素坐标，不同设备屏幕尺寸、分辨率差异会导致这些值在跨设备时失效。解决思路是将位置和尺寸转换为相对于Story画布的比例值，恢复时再根据当前屏幕尺寸计算实际布局参数。

一、替换绝对坐标为相对比例 #

1. 获取Story画布的基准尺寸 #

首先需要获取Story画布（通常是全屏或固定比例的容器）的实际尺寸，可通过GlobalKey或MediaQuery实现：

final storyCanvasKey = GlobalKey();

// 获取画布当前尺寸
Size _getCanvasSize(BuildContext context) {
  // 如果画布是全屏，直接用屏幕尺寸
  // return MediaQuery.of(context).size;
  
  // 如果是自定义容器，用GlobalKey获取
  final renderBox = storyCanvasKey.currentContext?.findRenderObject() as RenderBox?;
  return renderBox?.size ?? Size.zero;
}

2. 计算并保存相对比例 #

不再直接保存left/top/right/bottom，而是计算这些值相对于画布宽高的比例：

final canvasSize = _getCanvasSize(context);
final widgetRect = myCustomContainerKey.globalPaintBounds!;

// 计算相对比例（范围0-1）
final relativeLeft = widgetRect.left / canvasSize.width;
final relativeTop = widgetRect.top / canvasSize.height;
final relativeWidth = widgetRect.width / canvasSize.width;
final relativeHeight = widgetRect.height / canvasSize.height;

// 保存到本地存储（示例）
await saveToLocalStorage({
  'left': relativeLeft,
  'top': relativeTop,
  'width': relativeWidth,
  'height': relativeHeight,
});

二、恢复时计算实际布局参数 #

读取保存的比例值，结合当前设备的画布尺寸，计算出实际的位置和大小：

// 从本地存储读取数据
final savedData = await getFromLocalStorage();
final relativeLeft = savedData['left'] as double;
final relativeTop = savedData['top'] as double;
final relativeWidth = savedData['width'] as double;
final relativeHeight = savedData['height'] as double;

// 获取当前画布尺寸
final currentCanvasSize = _getCanvasSize(context);

// 计算实际布局参数
final actualLeft = relativeLeft * currentCanvasSize.width;
final actualTop = relativeTop * currentCanvasSize.height;
final actualWidth = relativeWidth * currentCanvasSize.width;
final actualHeight = relativeHeight * currentCanvasSize.height;

// 构建响应式布局的Widget
Positioned(
  left: actualLeft,
  top: actualTop,
  width: actualWidth,
  height: actualHeight,
  child: YourCustomWidget(),
)

三、关键优化细节 #

• 处理未渲染完成的情况：如果调用_getCanvasSize时Widget还未渲染，会返回Size.zero，可结合LayoutBuilder或WidgetsBinding.instance.addPostFrameCallback确保在渲染完成后获取尺寸。
• 适配屏幕旋转：如果支持横屏，保存时可记录屏幕方向，恢复时根据当前方向交换宽高比例，保证布局一致性。
• 支持缩放旋转：如果Widget支持缩放、旋转，需额外保存缩放比例、旋转角度，恢复时应用这些参数到Transform组件中。

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