MAUI怎么实现分屏视图 MAUI TwoPaneView用法

MAUI 中无内置 TwoPaneView，推荐使用 .net MAUI Community Toolkit v8.0+ 的 TwoPaneView 实现自适应分屏；也可用 Grid + VisualStateManager 手动模拟，需注意平台差异与初始化配置。

MAUI 中没有内置的 TwoPaneView 控件（那是 UWP/winUI 的概念），但你可以用 Grid + VisualStateManager 模拟分屏效果，或借助社区库（如 .NET MAUI Community Toolkit）中的 TwoPaneView —— 它已在 v8.0+ 正式支持。

使用 MAUI Community Toolkit 的 TwoPaneView

这是目前最接近原生分屏体验的方式，支持自适应布局（单栏/双栏自动切换）。

• 安装 NuGet 包：CommunityToolkit.Maui（v8.0 或更高）
• 在 MauiProgram.cs 中注册：`builder.UseMauiapp().UseMauiCommunityToolkit();`
• XAML 中使用：

它会根据窗口宽度自动决定显示单栏（堆叠）还是双栏（并排）——默认临界点是 720px（可配置 WideModeThresholdWidth）。

手动用 Grid 实现简易分屏

适合轻量场景或需要完全自控布局逻辑的情况。

• 定义两列 Grid：ColumnDefinitions="*,*"（等宽）或 "300,*"（固定左栏）
• 绑定数据时注意：选中项变化要同步更新右侧内容
• 配合 VisualStateGroup 响应窗口尺寸变化（比如小屏时隐藏左栏、加汉堡菜单）

示例片段：

适配不同设备的关键细节

• TwoPaneView 默认只在 windows 和 macOS 上启用双栏；android/ios 默认单栏（因屏幕窄），可通过设置 PanePriority="Right" 或监听 SizeChanged 手动控制
• 使用 WindowSizeBehavior（如 SinglePane, Wide）可强制指定模式
• 记得在 ViewModel 中处理 SelectedItem 变化，并通知 Pane2 更新（INotifyPropertyChanged 或 ObservableProperty）

常见问题提醒

• 未显示第二栏？检查是否遗漏 UseMauiCommunityToolkit() 或引用了旧版 toolkit
• 布局错乱？确认父容器没设死高度/宽度，避免挤压 TwoPaneView
• 想在手机上也双栏？可以，但需手动设置 WideModeThresholdWidth="0" 并确保内容可滚动

基本上就这些。不复杂但容易忽略初始化和平台行为差异。