寻求可用的.NET MAUI TabbedPage示例及启动异常解决方案

XAML 实现方式 #

直接创建一个继承自TabbedPage的页面，作为应用的主页面：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppName"
             x:Class="YourAppName.MainTabbedPage">
    <!-- 第一个标签页：直接内嵌ContentPage -->
    <ContentPage Title="首页" IconImageSource="home.svg">
        <StackLayout Padding="20">
            <Label Text="首页内容区域" FontSize="Large" HorizontalOptions="Center"/>
        </StackLayout>
    </ContentPage>
    <!-- 第二个标签页：引用自定义的ContentPage -->
    <local:SettingsPage Title="设置" IconImageSource="settings.svg"/>
</TabbedPage>

然后在App.xaml.cs中设置主页面：

public App()
{
    InitializeComponent();
    MainPage = new MainTabbedPage();
}

代码后台实现方式 #

如果偏好纯代码编写，可直接创建TabbedPage子类：

using Microsoft.Maui.Controls;

namespace YourAppName;

public class MainTabbedPage : TabbedPage
{
    public MainTabbedPage()
    {
        // 构建首页标签
        var homePage = new ContentPage
        {
            Title = "首页",
            IconImageSource = "home.svg",
            Content = new Label
            {
                Text = "首页内容",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand
            }
        };

        // 构建设置页标签
        var settingsPage = new SettingsPage
        {
            Title = "设置",
            IconImageSource = "settings.svg"
        };

        // 将页面添加到TabbedPage
        Children.Add(homePage);
        Children.Add(settingsPage);
    }
}

同样在App.xaml.cs中指定这个页面为主页面即可。

启动异常常见排查点 #

• 检查子页面的定义：确保所有ContentPage子类都能正常初始化，没有未处理的构造函数错误
• 资源引用：IconImageSource指定的图标要确保在各平台资源目录中存在（比如Android的Resources/drawable，iOS的Resources），也可以使用字体图标替代
• 命名空间：XAML中local命名空间必须和项目实际命名空间一致，否则会找不到自定义页面
• 异步逻辑：不要在TabbedPage或子页面的构造函数中直接执行未等待的异步操作，避免初始化时出现异常

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