.NET MAUI：添加构造函数导致FlyoutPage容器异常，求正确解决方案

问题分析 #

你遇到的「Flyout and Detail must be set before adding FlyoutPage to a container」错误，核心原因是FlyoutPage要求在被添加到容器（比如设置为App的MainPage）之前，必须完成Flyout和Detail属性的初始化。

你最初的无参构造函数没有调用InitializeComponent()，而XAML中定义的<FlyoutPage.Flyout>和<FlyoutPage.Detail>内容，正是在InitializeComponent()执行时被加载并赋值给对应属性的。当App.xaml.cs调用new MainPage()时，页面的Flyout和Detail属性未被初始化就被设置为MainPage，触发了FlyoutPage的校验逻辑，导致报错。

当你在无参构造中添加InitializeComponent()后，XAML内容被正确加载，Flyout和Detail属性完成初始化，错误自然消失。

关于构造函数的正确写法 #

保留两个构造函数并都调用InitializeComponent()是可行的，但更优雅的做法是通过构造函数链避免重复代码，同时保证两种实例化方式都能正确初始化页面：

using Realizer.ViewModels;

namespace Realizer.Pages;

public partial class MainPage : FlyoutPage
{
    // 无参构造调用带参构造，传递默认ViewModel实例
    public MainPage() : this(new MainPageViewModel())
    {
    }

    public MainPage(MainPageViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = viewModel;
    }
}

这种写法既满足了直接实例化（如App.xaml.cs中的调用），也支持依赖注入场景下传入ViewModel，同时只写一次InitializeComponent()，避免代码冗余。

你可能忽略的其他要点 #

1. Flyout项的Command绑定问题 #

你当前XAML中Flyout模型的Command属性是硬编码的字符串（如Command="GoToClientsPageCommand"），这种写法无法正确关联到ViewModel中的RelayCommand。正确的做法是将Flyout项的数据源移到ViewModel中，实现绑定：

修改MainPageViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Realizer.Pages;
using Realizer.Models;
using System.Collections.ObjectModel;

namespace Realizer.ViewModels
{
    public partial class MainPageViewModel : ObservableObject
    {
        public ObservableCollection<Flyout> FlyoutItems { get; set; }

        public MainPageViewModel()
        {
            FlyoutItems = new ObservableCollection<Flyout>
            {
                new Flyout { Title = "Home", IconSource = "home.png", Command = GoToHomePageCommand },
                new Flyout { Title = "Clients", IconSource = "person.png", Command = GoToClientsPageCommand }
            };
        }

        [RelayCommand]
        private async Task GoToHomePage()
        {
            // 实现首页跳转逻辑
        }

        [RelayCommand]
        private async Task GoToClientsPage()
        {
            await Application.Current.MainPage.Navigation.PushAsync(new ClientsPage());
        }
    }
}

修改MainPage.xaml中的CollectionView

<CollectionView ItemsSource="{Binding FlyoutItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:Flyout">
            <Grid Padding="20, 5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding IconSource}" Scale="1.5"/>
                <Button Grid.Column="1"
                        Margin="5"
                        Text="{Binding Title}"
                        Command="{Binding Command}"
                        FontSize="16"
                        FontAttributes="Bold"
                        TextColor="Black"
                        HeightRequest="60"
                        Padding="0,0,110,0"
                        BackgroundColor="LightGray"/>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

2. 依赖注入的最佳实践 #

如果你的项目后续会引入依赖注入（.NET MAUI默认支持），建议在App.xaml.cs中通过DI容器获取MainPage实例，而不是直接new MainPage()：

using Realizer.Pages;
using Microsoft.Extensions.DependencyInjection;

namespace Realizer
{
    public partial class App : Application
    {
        public App(IServiceProvider serviceProvider)
        {
            InitializeComponent();
            MainPage = serviceProvider.GetRequiredService<MainPage>();
        }

        // 在MauiProgram.cs中注册服务
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            // 注册页面和ViewModel
            builder.Services.AddSingleton<MainPage>();
            builder.Services.AddSingleton<MainPageViewModel>();
            builder.Services.AddTransient<ClientsPage>();

            return builder.Build();
        }
    }
}

这样可以更好地解耦页面和ViewModel，便于后续维护和测试。

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