Flutter中如何实现iPad应用局部区域投屏的演示模式？

1. 依赖配置与初始化 #

• 在pubspec.yaml中添加presentation_displays依赖，执行flutter pub get完成安装。
• 应用启动时，通过PresentationDisplays实例监听外接屏幕的连接/断开事件，比如借助displaysStream获取实时屏幕状态。

2. 主屏幕（iPad）界面布局 #

• 主屏幕布局同时包含绘图区和天气显示区，用Row或Column组合即可，比如用Row将两个区域横向排列。
• 把绘图区封装成独立可复用的Widget（如DrawingBoard组件），方便后续在外接屏幕单独渲染。

3. 外接屏幕内容渲染 #

• 监听到外接屏幕连接时，调用PresentationDisplays的showDisplay方法，传入目标Display对象和要渲染的DrawingBoard组件。此时外接屏幕会单独显示绘图区内容，不会镜像主屏幕的天气显示区。

4. 实时状态同步 #

• 若iPad上的绘图操作是实时的，要保证外接屏幕的DrawingBoard同步更新。可以用ChangeNotifier、Provider或Riverpod等状态管理工具，让两个屏幕的绘图组件共享同一状态源，实现内容实时同步。

5. 屏幕断开后的资源清理 #

• 监听屏幕断开事件，调用PresentationDisplays的hideDisplay方法，清理外接屏幕的渲染资源，避免内存泄漏。

核心代码示例 #

final presentationDisplays = PresentationDisplays();

@override
void initState() {
  super.initState();
  // 监听外接屏幕状态变化
  presentationDisplays.displaysStream.listen((displays) {
    if (displays.isNotEmpty) {
      // 连接外接屏幕，仅展示绘图区
      presentationDisplays.showDisplay(
        display: displays.first,
        builder: (context) => const DrawingBoard(),
      );
    } else {
      // 断开屏幕，清理外接显示内容
      presentationDisplays.hideDisplay();
    }
  });
}

// 主屏幕布局
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Row(
      children: [
        Expanded(child: DrawingBoard()), // 主屏幕绘图区
        Expanded(child: WeatherDisplay()), // 主屏幕天气区
      ],
    ),
  );
}

注意事项 #

• 测试时需确保iPad通过有线/无线方式连接外接显示器，且系统已授予应用外接显示权限。
• 不同iOS版本对外接显示的权限配置有细微差异，需对应适配。

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