Xamarin iOS购物车应用：Tabbed Page切换时保持GridView/ListView状态

嘿，这个场景我太熟悉了！之前做Tabbed商品展示应用时也踩过这个坑——所有Tab复用同一个Content Page，切换Tab就丢了显示状态对吧？给你几个实用的解决方案，按需选就行：

核心思路是把显示状态（ListView/GridView）放到一个全局可访问的地方，让所有Content Page实例共用这个状态。

首先创建一个单例ViewModel（或者静态类，推荐用ViewModel以便支持数据绑定）：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class SharedDisplayModeVM : INotifyPropertyChanged
{
    private bool _isGridViewActive;
    // 默认显示ListView，所以初始值为false
    public bool IsGridViewActive
    {
        get => _isGridViewActive;
        set
        {
            _isGridViewActive = value;
            OnPropertyChanged();
        }
    }

    // 单例实例，确保全局唯一
    public static SharedDisplayModeVM Instance { get; } = new SharedDisplayModeVM();

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

然后在你的Content Page里，绑定这个状态来控制视图显示：

代码后置方式： #

protected override void OnAppearing()
{
    base.OnAppearing();
    // 根据全局状态切换视图可见性
    var mode = SharedDisplayModeVM.Instance.IsGridViewActive;
    MyListView.IsVisible = !mode;
    MyGridView.IsVisible = mode;
}

// 切换按钮点击事件
private void SwitchToGridView_Clicked(object sender, EventArgs e)
{
    SharedDisplayModeVM.Instance.IsGridViewActive = true;
    MyListView.IsVisible = false;
    MyGridView.IsVisible = true;
}

private void SwitchToListView_Clicked(object sender, EventArgs e)
{
    SharedDisplayModeVM.Instance.IsGridViewActive = false;
    MyListView.IsVisible = true;
    MyGridView.IsVisible = false;
}

MVVM数据绑定方式（更优雅）： #

先在XAML里设置BindingContext，然后用布尔转换器控制可见性：

<ContentPage.Resources>
    <converters:InverseBooleanConverter x:Key="InverseBoolConverter"/>
</ContentPage.Resources>

<ContentPage.BindingContext>
    <vm:SharedDisplayModeVM x:StaticMember="vm:SharedDisplayModeVM.Instance"/>
</ContentPage.BindingContext>

<ListView IsVisible="{Binding IsGridViewActive, Converter={StaticResource InverseBoolConverter}}" .../>
<GridView IsVisible="{Binding IsGridViewActive}" .../>

（注：InverseBooleanConverter是一个自定义转换器，把布尔值反转，你可以自己实现一个，逻辑很简单）

这样不管切换到哪个Tab，Content Page每次出现都会读取全局状态，完美保持一致。

如果你的需求是不同Tab可以保留各自的显示状态（比如Tab1用GridView，Tab2用ListView），可以给每个Tab项附加自定义状态：

首先定义一个存储状态的类：

public class TabDisplayState
{
    public bool IsGridViewActive { get; set; } = false;
}

然后在TabbedPage初始化Tab时，把状态存到Tab的Tag属性里：

// 创建Tab1
var tab1 = new NavigationPage(new YourContentPage())
{
    Title = "商品分类1",
    Tag = new TabDisplayState()
};
// 创建Tab2
var tab2 = new NavigationPage(new YourContentPage())
{
    Title = "商品分类2",
    Tag = new TabDisplayState()
};

// 添加到TabbedPage
this.Children.Add(tab1);
this.Children.Add(tab2);

接着在Content Page里读取和更新状态：

protected override void OnAppearing()
{
    base.OnAppearing();
    // 从父级NavigationPage的Tag里获取当前Tab的状态
    if (Parent is NavigationPage navPage && navPage.Tag is TabDisplayState state)
    {
        MyListView.IsVisible = !state.IsGridViewActive;
        MyGridView.IsVisible = state.IsGridViewActive;
    }
}

private void SwitchToGridView_Clicked(object sender, EventArgs e)
{
    if (Parent is NavigationPage navPage && navPage.Tag is TabDisplayState state)
    {
        state.IsGridViewActive = true;
    }
    MyListView.IsVisible = false;
    MyGridView.IsVisible = true;
}

这样每个Tab的显示状态就独立保存了，切换Tab不会互相影响。

如果需要用户关闭应用再打开，依然保持上次的显示模式，可以用Xamarin.Essentials的Preferences来存储：

using Xamarin.Essentials;

// 切换按钮点击时保存状态
private void SwitchToGridView_Clicked(object sender, EventArgs e)
{
    Preferences.Set("DisplayMode_GridView", true);
    MyListView.IsVisible = false;
    MyGridView.IsVisible = true;
}

private void SwitchToListView_Clicked(object sender, EventArgs e)
{
    Preferences.Set("DisplayMode_GridView", false);
    MyListView.IsVisible = true;
    MyGridView.IsVisible = false;
}

// 页面加载时读取状态
protected override void OnAppearing()
{
    base.OnAppearing();
    var isGridView = Preferences.Get("DisplayMode_GridView", false);
    MyListView.IsVisible = !isGridView;
    MyGridView.IsVisible = isGridView;
}

这个方案可以和前两个结合使用，既保持Tab切换状态，又能跨会话保存。

内容的提问来源于stack exchange，提问作者P.Thiyagu