Xamarin.Forms - 如何导航到选项卡式页面子页面

在 Xamarin.Forms 中，选项卡式页面（Tabbed Page）是一种常见的页面布局方式。它允许用户通过切换选项卡来浏览不同的页面内容。但是，有时我们需要在选项卡页面中导航到其它页面，这就需要使用子页面（Child Page）来实现。

本文将介绍如何在 Xamarin.Forms 中导航到选项卡式页面的子页面。

步骤

假设我们已经有一个选项卡式页面 MyTabbedPage，其中包含两个选项卡 HomePage 和 SettingsPage。现在我们需要在 HomePage 中导航到一个子页面 DetailPage。

创建子页面和视图模型

首先，我们需要创建一个子页面 DetailPage 和它所需的视图模型 DetailViewModel。代码如下：

public class DetailViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    
    private string _title;
    public string Title
    {
        get => _title;
        set
        {
            _title = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Title)));
        }
    }

    public ICommand GoBackCommand { get; }

    public DetailViewModel()
    {
        Title = "Detail Page";

        GoBackCommand = new Command(async () =>
        {
            await App.Current.MainPage.Navigation.PopAsync();
        });
    }
}

public class DetailPage : ContentPage
{
    public DetailPage()
    {
        var viewModel = new DetailViewModel();
        BindingContext = viewModel;

        var titleLabel = new Label
        {
            Text = "Title:",
        };
        var titleEntry = new Entry
        {
            Keyboard = Keyboard.Text,
            Text = viewModel.Title,
        };
        titleEntry.SetBinding(Entry.TextProperty, nameof(viewModel.Title));

        var goBackButton = new Button
        {
            Text = "Back",
        };
        goBackButton.SetBinding(Button.CommandProperty, nameof(viewModel.GoBackCommand));

        Content = new StackLayout
        {
            VerticalOptions = LayoutOptions.CenterAndExpand,
            Children =
            {
                titleLabel,
                titleEntry,
                goBackButton,
            },
        };
    }
}

DetailViewModel 类包含一个 Title 属性和一个 GoBackCommand 命令。Title 属性用于显示 DetailPage 的标题，GoBackCommand 命令用于返回上一级页面。在 DetailPage 中，我们使用 Binding 将 titleLabel 和 titleEntry 的 Text 属性与 viewModel 的 Title 属性绑定在一起。我们还创建了一个 goBackButton，并将它的 Command 属性与 viewModel 的 GoBackCommand 命令绑定在一起。

导航到子页面

接下来，在 HomePage 中，我们将创建一个按钮，在用户点击该按钮时导航到 DetailPage。代码如下：

public class HomePage : ContentPage
{
    public HomePage()
    {
        Title = "Home Page";

        var goToDetailButton = new Button
        {
            Text = "Go to Detail Page",
        };
        goToDetailButton.Clicked += async (sender, e) =>
        {
            var detailPage = new DetailPage();
            await Navigation.PushAsync(detailPage);
        };

        Content = new StackLayout
        {
            VerticalOptions = LayoutOptions.CenterAndExpand,
            Children =
            {
                goToDetailButton,
            },
        };
    }
}

在 HomePage 中，我们创建了一个 goToDetailButton 按钮，并将它的 Clicked 事件与一个异步方法绑定。在这个异步方法中，我们创建了一个 DetailPage 实例，并使用 Navigation 属性的 PushAsync 方法将其推入导航栈中。

运行程序

最后，我们启动程序，打开 MyTabbedPage，点击 HomePage 中的 Go to Detail Page 按钮，可以看到我们成功地从选项卡式页面中导航到了子页面 DetailPage。可以根据自己的需求，添加更多的子页面和导航逻辑。

总结

本文介绍了如何在 Xamarin.Forms 中导航到选项卡式页面的子页面。我们创建了一个 DetailPage 和它所需的视图模型 DetailViewModel，使用 Navigation 属性的 PushAsync 方法将 DetailPage 推入导航栈中，最终成功地实现了导航功能。希望本文能帮助您更好地理解 Xamarin.Forms 中的页面导航机制。