绑定NotificationsNumber时Xamarin BadgeView触发界面冻结求助

在Xamarin项目中使用Xamarin Community Toolkit（XCT）的BadgeView组件时遇到界面冻结问题：

• BadgeView被放置在TabbedPage的Shell.TitleView中，其Text属性绑定到ViewModel的NotificationsNumber（int类型）
• 测试用的同绑定该属性的Label可正常更新值
• 当ViewModel通过API获取数据后更新NotificationsNumber并触发OnPropertyChanged，界面出现冻结（类似死锁）
• ViewModel中其他属性采用相同更新流程无异常，怀疑是BadgeView的绑定逻辑引发无限循环或布局死锁

1. 检测绑定循环/重复更新 #

在ViewModel的SetProperty和OnPropertyChanged方法中添加日志输出，跟踪NotificationsNumber的更新频率：

protected bool SetProperty<T>(ref T backingStore, T value, [CallerMemberName] string propertyName = "", Action? onChanged = null)
{
    Debug.WriteLine($"SetProperty called for {propertyName}: old={backingStore}, new={value}");
    if (EqualityComparer<T>.Default.Equals(backingStore, value))
        return false;

    backingStore = value;
    onChanged?.Invoke();
    OnPropertyChanged(propertyName);
    return true;
}

protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
{
    Debug.WriteLine($"OnPropertyChanged triggered for {propertyName}");
    var changed = PropertyChanged;
    if (changed == null)
        return;

    changed.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

运行后查看日志，如果NotificationsNumber被反复触发更新（即使值未变化），则说明存在绑定循环问题。

2. 隔离BadgeView测试 #

将BadgeView从Shell.TitleView移到页面的普通内容区域，保持相同的绑定逻辑，测试更新NotificationsNumber时是否仍会冻结。如果问题消失，说明是Shell.TitleView的布局上下文与BadgeView的交互存在冲突；如果问题复现，则锁定是BadgeView组件本身的问题。

3. 验证AutoHide属性影响 #

暂时将BadgeView的AutoHide设为False，测试更新后是否冻结：

<xct:BadgeView Text="{Binding NotificationsNumber}" BackgroundColor="#c1121f" TextColor="White" FontSize="Caption" AutoHide="False">

AutoHide为True时，组件会根据Text的值自动显示/隐藏，可能触发频繁的布局重建，进而引发死锁。

4. 确认UI线程执行上下文 #

虽然await通常会捕获同步上下文，但API回调可能在后台线程触发。在更新NotificationsNumber时强制切换到UI线程：

private async void InitializeAsync()
{
    await RunInSafeScope(async () =>
    {
        var notificationCountTask = HttpClient.GetWithRetryAsync<ValueResult<int>>(ApiRoutes.NOTIFICATION_COUNT);
        await Task.WhenAll(notificationCountTask);

        Device.BeginInvokeOnMainThread(() =>
        {
            NotificationsNumber = notificationCountTask.Result.Value;
        });
    }, (ex) =>
    {
        // 异常处理逻辑
    });
}

如果冻结问题消失，说明是线程上下文导致的绑定更新异常。

5. 检查XCT版本兼容性 #

确认使用的XCT版本是否存在已知的BadgeViewbug，尝试升级到最新稳定版（通过NuGet包管理器更新Xamarin.CommunityToolkit）。

1. 显式转换绑定类型 #

BadgeView的Text属性为string类型，直接绑定int类型可能触发隐式转换逻辑，导致异常。在ViewModel中添加string类型的属性，显式转换后绑定：

private string _notificationsText = "0";
public string NotificationsText
{
    get => _notificationsText;
    private set => SetProperty(ref _notificationsText, value);
}

// 更新时同步设置两个属性
NotificationsNumber = notificationCountTask.Result.Value;
NotificationsText = NotificationsNumber.ToString();

XAML中修改绑定：

<xct:BadgeView Text="{Binding NotificationsText}" BackgroundColor="#c1121f" TextColor="White" FontSize="Caption" AutoHide="True">

2. 手动控制显示/隐藏替代AutoHide #

如果AutoHide是问题根源，自定义显示逻辑替代它：

• 添加一个值转换器，将int类型转换为bool（值>0时返回true）：

public class IntToBoolConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is int count && count > 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

• 在XAML中引用转换器，手动控制BadgeView的IsVisible：

<ResourceDictionary>
    <converters:IntToBoolConverter x:Key="IntToBoolConverter"/>
</ResourceDictionary>

<xct:BadgeView Text="{Binding NotificationsNumber}" BackgroundColor="#c1121f" TextColor="White" FontSize="Caption" IsVisible="{Binding NotificationsNumber, Converter={StaticResource IntToBoolConverter}}">

3. 自定义Badge布局替代XCT组件 #

如果上述方法无效，用原生布局实现Badge功能，避免依赖XCT的BadgeView：

<Grid>
    <!-- 图标 -->
    <Image>
        <Image.Source>
            <FontImageSource FontFamily="FASolid" Color="White" Size="Large" Glyph="{x:Static icons:FontAwesomeIcons.Bell}"/>
        </Image.Source>
    </Image>
    <!-- 自定义Badge -->
    <Frame BackgroundColor="#c1121f" CornerRadius="10" Padding="4,2" 
           HorizontalOptions="End" VerticalOptions="Start"
           IsVisible="{Binding NotificationsNumber, Converter={StaticResource IntToBoolConverter}}">
        <Label Text="{Binding NotificationsNumber}" TextColor="White" FontSize="Caption" 
               HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
               WidthRequest="16" HeightRequest="16"/>
    </Frame>
</Grid>

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