.NET MAUI条件渲染问题求助：基于用户账户变量动态切换视图

针对 TemplateSelector 导致 CollectionView 点击无响应的修复 #

核心问题与解决步骤 #

• 上下文绑定冲突：TemplateSelector 返回的页面可能继承了 Shell 的 BindingContext，而非目标 ViewModel。需确保页面的 BindingContext 明确指向对应 ViewModel：

  <!-- 在 Page1 的 XAML 根节点设置 -->
  <ContentPage.BindingContext>
      <viewmodel:Page1ViewModel />
  </ContentPage.BindingContext>
  

• 导航逻辑缺失或错误：
  1. 先在 AppShell.xaml.cs 注册目标页面路由：

     public AppShell()
     {
         InitializeComponent();
         Routing.RegisterRoute(nameof(ViewProductsPage), typeof(ViewProductsPage));
     }
     

  2. 在 Page1 的 ViewModel 中实现带参数的导航命令：

     public ICommand ViewProductCommand => new RelayCommand<Product>(async (product) =>
     {
         if (product == null) return;
         await Shell.Current.GoToAsync($"{nameof(ViewProductsPage)}?Product={product.Id}");
     });
     

  3. 绑定 CollectionView 的点击事件：

     <CollectionView ItemsSource="{Binding Products}" 
                     ItemTappedCommand="{Binding ViewProductCommand}"
                     ItemTappedCommandParameter="{Binding .}">
         <!-- 项模板 -->
     </CollectionView>
     

针对 ContentTemplates 自动弹出 ViewProducts 且数据为空的修复 #

核心问题与解决步骤 #

• 命令自动触发：检查 ViewModel 中是否存在初始化时自动执行的导航逻辑，比如构造函数中直接调用命令，或 RelayCommand 的 CanExecute 默认值为 true 导致自动执行。修改命令逻辑，确保仅在用户点击时触发：

  // 确保命令仅在产品被选中时执行
  public ICommand ViewProductCommand => new RelayCommand<Product>(async (product) =>
  {
      if (product == null) return;
      // 导航逻辑
  }, (product) => product != null);
  

• 页面加载时的错误导航：检查 Page1 的 OnAppearing 方法，是否误写了导航代码，移除不必要的自动导航逻辑。
• 数据加载时机错误：确保产品数据在页面加载完成后异步加载（如在 OnAppearing 中调用数据接口），而非构造函数中同步初始化，避免导航时数据未就绪。

推荐的条件渲染实现方案 #

方案一：自定义 DataTemplateSelector（稳定可靠） #

1. 创建模板选择器类：

   public class Page1TemplateSelector : DataTemplateSelector
   {
       public DataTemplate DefaultTemplate { get; set; }
       public DataTemplate LoanedTemplate { get; set; }
   
       protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
       {
           // 从全局状态或依赖注入获取 UserLoanAccount
           var userAccount = App.Current.Services.GetService<UserLoanAccount>();
           return userAccount.HasActiveLoan ? LoanedTemplate : DefaultTemplate;
       }
   }
   

2. 在 AppShell.xaml 中配置模板：

   <Shell.Resources>
       <local:Page1TemplateSelector x:Key="Page1TemplateSelector">
           <local:Page1TemplateSelector.DefaultTemplate>
               <DataTemplate>
                   <view:Page1Default />
               </DataTemplate>
           </local:Page1TemplateSelector.DefaultTemplate>
           <local:Page1TemplateSelector.LoanedTemplate>
               <DataTemplate>
                   <view:Page1WithLoan />
               </DataTemplate>
           </local:Page1TemplateSelector.LoanedTemplate>
       </local:Page1TemplateSelector>
   </Shell.Resources>
   
   <TabBar>
       <ShellContent Route="Page1" Icon="home" Title="Home" 
                     ContentTemplate="{StaticResource Page1TemplateSelector}" />
       <!-- 其他 ShellContent -->
   </TabBar>
   

方案二：动态切换 ShellContent 模板（更直接） #

用户登录完成后，直接修改对应 ShellContent 的 ContentTemplate：

// 登录成功后执行
var tabBar = Shell.Current.Items.OfType<TabBar>().First();
var page1Content = tabBar.Items.OfType<ShellContent>().First(c => c.Route == "Page1");
var userAccount = App.Current.Services.GetService<UserLoanAccount>();

page1Content.ContentTemplate = userAccount.HasActiveLoan 
    ? new DataTemplate(typeof(Page1WithLoan)) 
    : new DataTemplate(typeof(Page1Default));

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