MAUI优化：页面启动单次生成渐变颜色，页面显时触发更新

核心思路 #

把渐变颜色列表从Converter内部计算移到ViewModel/页面级的公共变量，让Converter直接复用该列表；同时利用页面导航事件，每次进入视图时重新计算渐变列表。

具体实现步骤 #

1. 在ViewModel中定义渐变颜色列表与计算方法 #

using System.Collections.ObjectModel;
using Microsoft.Maui.Graphics;

public class YourViewModel
{
    // 存储渐变颜色的公共列表，供Converter复用
    public ObservableCollection<Color> GradientColors { get; set; } = new ObservableCollection<Color>();
    public ObservableCollection<Dates> DateList { get; set; } = new ObservableCollection<Dates>();

    public YourViewModel()
    {
        // 页面打开时首次计算渐变颜色
        CalculateGradientColors();
        // 初始化DateList的逻辑...
    }

    // 封装渐变颜色计算逻辑
    private void CalculateGradientColors()
    {
        GradientColors.Clear();
        // 示例：生成从红到蓝的10阶渐变，替换成你的实际计算逻辑
        for (int i = 0; i < 10; i++)
        {
            var ratio = (double)i / 9;
            var gradientColor = Color.FromRgb(
                (byte)(255 * (1 - ratio)),
                0,
                (byte)(255 * ratio)
            );
            GradientColors.Add(gradientColor);
        }
    }
}

2. 修改Converter，复用公共渐变颜色列表 #

调整Converter，让它接收ViewModel中的GradientColors作为参数，不再重复计算：

using System.Globalization;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;

public class ColorChangedConverter : IValueConverter
{
    // 绑定ViewModel中的渐变颜色列表
    public ObservableCollection<Color> GradientColors { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is DateTime mailDate && GradientColors?.Count > 0)
        {
            // 替换成你根据MailToHostDate计算索引的逻辑
            int colorIndex = /* 例如：根据日期差计算索引 */;
            // 确保索引在有效范围内
            colorIndex = Math.Clamp(colorIndex, 0, GradientColors.Count - 1);
            return GradientColors[colorIndex];
        }
        return Colors.Transparent;
    }

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

3. XAML中绑定Converter与渐变列表 #

在页面资源中配置Converter，并绑定其GradientColors到ViewModel的同名属性：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.YourPage">
    <ContentPage.Resources>
        <local:ColorChangedConverter x:Key="ColorChangedConverter"
                                     GradientColors="{Binding GradientColors}" />
    </ContentPage.Resources>

    <CollectionView ItemsSource="{Binding DateList}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding YourTextProperty}"
                       BackgroundColor="{Binding MailToHostDate, Converter={StaticResource ColorChangedConverter}}" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

4. 页面进入视图时重新计算渐变列表 #

利用页面的OnNavigatedTo事件，每次页面进入视图时触发渐变颜色重新计算：

public partial class YourPage : ContentPage
{
    public YourPage()
    {
        InitializeComponent();
        BindingContext = new YourViewModel();
    }

    protected override void OnNavigatedTo(NavigatedToEventArgs args)
    {
        base.OnNavigatedTo(args);
        if (BindingContext is YourViewModel vm)
        {
            vm.CalculateGradientColors();
        }
    }
}

如果使用CommunityToolkit.Mvvm，可以让ViewModel实现INavigatedAware接口，更贴合MVVM模式：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Navigation;

public partial class YourViewModel : ObservableObject, INavigatedAware
{
    // 已有的属性与方法...

    public void OnNavigatedFrom(NavigatedFromEventArgs args)
    {
        // 无需处理
    }

    public void OnNavigatedTo(NavigatedToEventArgs args)
    {
        CalculateGradientColors();
    }
}

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