如何在Flutter桌面应用中实现类Windows的多显示器重排UI

核心实现思路 #

• 定义数据模型：先写个Display类存储每个显示器的关键信息——ID、尺寸、位置坐标、是否为主屏，所有拖拽操作都基于这个模型的状态更新。
• 用Stack+Positioned渲染布局：把每个显示器做成Positioned组件放在Stack容器里，根据模型里的x/y坐标和宽高定位，拖拽时更新坐标就能实时刷新布局。
• 拖拽交互处理：给每个显示器组件添加GestureDetector，监听拖拽的开始、更新、结束事件。拖拽开始时记录触摸点相对于显示器的偏移，拖拽过程中用全局触摸位置减去这个偏移算出新坐标，实时更新模型并触发UI重绘。
• 可选：边缘吸附：为贴近Windows系统的体验，可添加吸附逻辑——当拖拽的显示器边缘和其他显示器边缘距离小于阈值（比如20px）时，自动对齐边缘。

核心代码片段 #

首先定义显示器数据类：

class Display {
  final String id;
  final Size size;
  Offset position;
  final bool isPrimary;

  Display({
    required this.id,
    required this.size,
    required this.position,
    required this.isPrimary,
  });
}

然后是主编辑器组件的实现：

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

  @override
  State<DisplayLayoutEditor> createState() => _DisplayLayoutEditorState();
}

class _DisplayLayoutEditorState extends State<DisplayLayoutEditor> {
  late List<Display> _displays;

  @override
  void initState() {
    super.initState();
    // 这里用模拟数据，实际可通过原生插件获取系统真实显示器信息
    _displays = [
      Display(
        id: '1',
        size: const Size(1920, 1080),
        position: Offset.zero,
        isPrimary: true,
      ),
      Display(
        id: '2',
        size: const Size(1920, 1080),
        position: const Offset(1920, 0),
        isPrimary: false,
      ),
    ];
  }

  Offset? _dragStartOffset;
  Display? _draggingDisplay;

  void _handlePanStart(DragStartDetails details, Display display) {
    _draggingDisplay = display;
    // 记录触摸点相对于显示器中心的偏移，避免拖拽时显示器跳变
    _dragStartOffset = details.localPosition - Offset(display.size.width / 2, display.size.height / 2);
  }

  void _handlePanUpdate(DragUpdateDetails details) {
    if (_draggingDisplay == null || _dragStartOffset == null) return;
    setState(() {
      // 计算新位置：全局触摸位置减去初始偏移
      final globalPos = details.globalPosition;
      _draggingDisplay!.position = globalPos - _dragStartOffset!;
      // 触发边缘吸附逻辑
      _snapToOtherDisplays();
    });
  }

  void _handlePanEnd(DragEndDetails details) {
    _draggingDisplay = null;
    _dragStartOffset = null;
  }

  // 边缘吸附逻辑，可根据需求扩展顶部/底部对齐
  void _snapToOtherDisplays() {
    if (_draggingDisplay == null) return;
    const snapThreshold = 20.0;
    for (final display in _displays) {
      if (display.id == _draggingDisplay!.id) continue;
      // 右边缘对齐到其他显示器左边缘
      if ((_draggingDisplay!.position.dx + _draggingDisplay!.size.width - display.position.dx).abs() < snapThreshold) {
        _draggingDisplay!.position = Offset(
          display.position.dx - _draggingDisplay!.size.width,
          _draggingDisplay!.position.dy,
        );
      }
      // 左边缘对齐到其他显示器右边缘
      if ((display.position.dx + display.size.width - _draggingDisplay!.position.dx).abs() < snapThreshold) {
        _draggingDisplay!.position = Offset(
          display.position.dx + display.size.width,
          _draggingDisplay!.position.dy,
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: _displays.map((display) {
          return Positioned(
            left: display.position.dx,
            top: display.position.dy,
            child: GestureDetector(
              onPanStart: (details) => _handlePanStart(details, display),
              onPanUpdate: _handlePanUpdate,
              onPanEnd: _handlePanEnd,
              child: Container(
                width: display.size.width / 4, // 缩小比例方便单屏预览
                height: display.size.height / 4,
                decoration: BoxDecoration(
                  border: Border.all(color: display.isPrimary ? Colors.blue : Colors.grey, width: 2),
                  color: Colors.grey[200],
                ),
                child: Stack(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(display.isPrimary ? '主屏' : '副屏'),
                    ),
                    Center(
                      child: Text('${display.size.width}×${display.size.height}'),
                    ),
                  ],
                ),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}

实用工具推荐 #

• 如果需要获取系统真实的显示器参数（尺寸、位置、主屏标识），可以用screen_retriever包，支持Windows、macOS、Linux等桌面平台。
• 若觉得状态管理繁琐，可尝试flutter_hooks简化拖拽过程中的状态跟踪，但核心的布局和拖拽逻辑仍需自行实现，目前没有直接支持多显示器重排的第三方包。

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