You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MAUI中如何设置TabbedPage的默认加载页面?

在MAUI中设置TabbedPage的默认显示页面

你可以通过TabbedPage的CurrentPage属性指定加载时默认显示的页面,TabbedPage的该属性是可写的,和NavigationPage的只读CurrentPage属性区分开即可。下面提供几种可行的实现方案:

方法1:代码后台直接指定(最简单直接)

在TabbedPage的构造函数中,待页面初始化完成后,将目标NavigationPage赋值给CurrentPage即可。你可以通过页面的Title、x:Name或者索引来定位目标页面:

示例代码

首先给目标NavigationPage添加x:Name(推荐,避免页面顺序变动导致索引失效):

<?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:你的命名空间"
            xmlns:helpers="clr-namespace:你的工具类命名空间"
            x:Name="MainTabbedPage">

    <NavigationPage Title="Search" >
        <x:Arguments>
            <local:SearchPage Title="Search For Book" />
        </x:Arguments>
        <NavigationPage.IconImageSource>
            <FontImageSource 
         FontFamily="MaterialDesignIconsFonts"
         Glyph="{x:Static helpers:MaterialDesignIconsFonts.Book}"
         Size="25" />
        </NavigationPage.IconImageSource>
    </NavigationPage>

    <!-- 给目标页面添加x:Name -->
    <NavigationPage x:Name="OneTab" Title="One">
        <x:Arguments>
            <local:MainPage Title="One" />
        </x:Arguments>
        <NavigationPage.IconImageSource>
            <FontImageSource 
         FontFamily="MaterialDesignIconsFonts"
         Glyph="{x:Static helpers:MaterialDesignIconsFonts.Menu}"
         Size="25" />
        </NavigationPage.IconImageSource>
    </NavigationPage>

    <NavigationPage Title="Two" IconImageSource="{StaticResource TabTwo}">
        <x:Arguments>
            <local:NewContextTest Title="Two" />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

然后在TabbedPage的后台代码中设置默认页面:

public MainTabbedPage()
{
    InitializeComponent();
    // 直接通过x:Name指定默认显示的页面
    CurrentPage = OneTab;
}

如果不想用x:Name,也可以通过Title或者索引查找:

// 通过Title查找
var targetPage = Children.FirstOrDefault(p => p.Title == "Two");
if (targetPage != null) CurrentPage = targetPage;

// 通过索引查找(第二个页面索引为1)
// CurrentPage = Children[1];

方法2:MVVM模式下绑定实现

如果使用MVVM架构,可以将TabbedPage的CurrentPage绑定到ViewModel的属性,实现更灵活的控制:

ViewModel中定义属性

public class MainTabbedViewModel : ObservableObject
{
    private Page _selectedTab;
    public Page SelectedTab
    {
        get => _selectedTab;
        set => SetProperty(ref _selectedTab, value);
    }

    // 初始化时指定默认页面(需要获取Tab子页实例,可通过构造函数传入或服务注入)
    public MainTabbedViewModel(Page defaultTabPage)
    {
        SelectedTab = defaultTabPage;
    }
}

XAML中绑定

<TabbedPage ... 
            BindingContext="{StaticResource MainTabbedViewModel}"
            CurrentPage="{Binding SelectedTab}">
    <!-- 你的NavigationPage子项 -->
</TabbedPage>

注意事项

  • 必须在InitializeComponent()之后设置CurrentPage,否则TabbedPage的Children集合尚未初始化,无法找到目标页面。
  • 优先使用x:Name或Title定位页面,避免依赖索引(页面顺序变动时索引会失效)。

内容的提问来源于stack exchange,提问作者imran chowdhury

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.18 20:40:22