.NET MAUI（Android平台）中基于ScrollView的自定义标签控件功能异常问题

我之前也碰到过类似的.NET MAUI BindableLayout在Android平台的刷新异常，结合你的代码和描述，这个问题的核心确实和MAUI早期预览版中BindableLayout的属性变更同步问题有关，再加上你的代码里几个可以优化的点，咱们一步步来解决：

问题根源分析 #

1. TabViewModel缺少属性变更通知：你的TabViewModel没有实现INotifyPropertyChanged接口，导致IsSelected属性变更时无法通知UI更新——哪怕你重新赋值了Tabs集合，MAUI的BindableLayout在Android上也可能无法正确识别这种变更。
2. 集合操作方式不当：你在ChangeTabClick里重新创建ObservableCollection并赋值给Tabs的做法，会触发BindableLayout销毁并重建所有标签项，在Android平台上这种频繁的集合替换容易引发布局计算异常，和视图切换逻辑叠加就出现了白屏。
3. 视图切换时机冲突：标签选中状态更新和视图切换的逻辑同步执行，Android的UI线程可能来不及处理所有刷新请求，导致视图切换时出现空白。

解决方案 #

1. 给TabViewModel添加属性变更通知 #

首先确保你的TabViewModel实现INotifyPropertyChanged，这样IsSelected的变更会直接通知UI：

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

namespace poc_maui.Models
{
    public class TabViewModel : INotifyPropertyChanged
    {
        private bool _isSelected;
        
        public int TabId { get; set; }
        public string TabTitle { get; set; }

        public bool IsSelected
        {
            get => _isSelected;
            set
            {
                if (_isSelected != value)
                {
                    _isSelected = value;
                    OnPropertyChanged();
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

2. 优化标签切换逻辑，避免重新创建集合 #

修改MainPageViewModel中的ChangeTabClick方法，直接修改原集合内项的IsSelected，不需要重新创建ObservableCollection：

private void ChangeTabClick(TabViewModel tab)
{
    try
    {
        // 直接更新原集合中项的选中状态，利用属性变更通知刷新UI
        foreach (var item in Tabs)
        {
            item.IsSelected = item.TabId == tab.TabId;
        }

        // 用Dispatcher延迟执行视图切换，确保标签UI先完成刷新
        Application.Current.Dispatcher.Dispatch(() =>
        {
            IsParentRecordTabVisible = tab.TabId == 1;
            IsAdditionalInfoTabVisible = tab.TabId == 2;
            
            // 记得补充其他标签的视图切换逻辑
            // IsContactsTabVisible = tab.TabId == 3;
            // ...
        });
    }
    catch (Exception ex)
    {
        Debug.WriteLine($"切换标签出错: {ex.Message}");
    }
}

3. 可选：优化XAML中的布局绑定 #

可以给标签项的Grid添加背景色绑定，更直观地验证选中状态，同时确保布局约束正确：

<DataTemplate>
    <Grid RowDefinitions="*, 4" RowSpacing="0" 
          BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='navy,dimgray'}">
        <Label Grid.Row="0" Text="{Binding TabTitle}" TextColor="White" 
               Padding="20,0" VerticalTextAlignment="Center" 
               HorizontalTextAlignment="Center" FontSize="12" HeightRequest="40"/>
        <BoxView Grid.Row="1" Color="Yellow" IsVisible="{Binding IsSelected}"/>
        <Grid.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding Path=BindingContext.TabChangedCommand, Source={x:Reference TabsView}}" 
                                  CommandParameter="{Binding .}"/>
        </Grid.GestureRecognizers>
    </Grid>
</DataTemplate>

（需要添加一个BoolToColorConverter，主要是辅助调试，这里就不展开实现了）

为什么这样修改有效？ #

• 属性变更通知：让IsSelected的变更直接驱动UI刷新，不需要依赖集合的整体替换，避免BindableLayout的重建开销。
• Dispatcher延迟视图切换：确保Android UI线程先处理完标签选中状态的刷新，再执行视图切换，避免布局计算冲突导致的白屏。
• 减少集合操作：直接修改集合内的项，符合ObservableCollection的设计初衷，MAUI的BindableLayout能更稳定地处理这种变更。

我用类似的方案解决过预览版MAUI Android上的标签控件异常，你可以试试这个修改，应该能解决白屏和选中状态不更新的问题。

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