CollectionView.EmptyView中SKLottieView动画无法显示问题求助

问题分析 #

你的SKLottieView在EmptyView里初始完全不显示，只有调试时重新粘贴控件才生效，核心原因是控件初始化时因IsVisible绑定为false，导致动画资源未加载/未触发播放，后续IsVisible变为true时，控件也不会自动启动动画。

解决方案 #

方案1：手动触发动画播放 #

给SKLottieView命名，在ViewModel的IsEmpty属性变化时，手动调用播放方法：

1. 在XAML中给SKLottieView添加x:Name：

<lottie:SKLottieView x:Name="emptyLottie"
                     Source="earthanimation.json"
                     RepeatCount="-1"
                     HeightRequest="350"
                     WidthRequest="350"
                     HorizontalOptions="CenterAndExpand"
                     VerticalOptions="CenterAndExpand"/>

2. 在页面后台代码中监听IsEmpty的变化，触发动画播放：

protected override void OnAppearing()
{
    base.OnAppearing();
    if (BindingContext is YourViewModel vm)
    {
        vm.PropertyChanged += (sender, e) =>
        {
            if (e.PropertyName == nameof(vm.IsEmpty))
            {
                MainThread.BeginInvokeOnMainThread(() =>
                {
                    if (vm.IsEmpty)
                    {
                        emptyLottie.Play();
                    }
                    else
                    {
                        emptyLottie.Pause();
                    }
                });
            }
        };
    }
}

注意用MainThread.BeginInvokeOnMainThread确保UI操作在主线程执行。

方案2：调整EmptyView的加载逻辑，避免提前隐藏控件 #

不要用ContentView的IsVisible控制EmptyView显示，而是通过DataTemplateSelector让CollectionView根据IsEmpty逻辑切换模板，确保带Lottie的控件只在需要时初始化：

1. 创建模板选择器：

public class EmptyViewTemplateSelector : DataTemplateSelector
{
    public DataTemplate EmptyWithLottie { get; set; }
    public DataTemplate EmptyHidden { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (container is CollectionView cv && cv.BindingContext is YourViewModel vm)
        {
            return vm.IsEmpty ? EmptyWithLottie : EmptyHidden;
        }
        return EmptyHidden;
    }
}

2. 在XAML中定义模板并使用选择器：

<ContentPage.Resources>
    <DataTemplate x:Key="EmptyWithLottieTemplate">
        <ContentView MinimumHeightRequest="485">
            <!-- 你的VerticalStackLayout、Grid及Lottie控件代码 -->
        </ContentView>
    </DataTemplate>
    <DataTemplate x:Key="EmptyHiddenTemplate">
        <ContentView IsVisible="False"/>
    </DataTemplate>
    <local:EmptyViewTemplateSelector x:Key="EmptyViewSelector"
                                     EmptyWithLottie="{StaticResource EmptyWithLottieTemplate}"
                                     EmptyHidden="{StaticResource EmptyHiddenTemplate}"/>
</ContentPage.Resources>

<CollectionView EmptyView="{StaticResource EmptyViewSelector}" .../>

方案3：检查Lottie资源文件的嵌入设置 #

确保earthanimation.json的生成操作设置为Embedded resource，并且Source路径正确：

• 文件在项目根目录时，直接写文件名即可
• 文件在子文件夹（如Resources/Animations）时，路径要写成Resources.Animations.earthanimation.json（根据项目命名空间调整）

额外提示 #

如果以上方法无效，可给SKLottieView添加Loaded事件，在控件加载时触发播放：

<lottie:SKLottieView ... Loaded="EarthLottie_Loaded"/>

后台代码：

private void EarthLottie_Loaded(object sender, EventArgs e)
{
    if (sender is SKLottieView lottie && BindingContext is YourViewModel vm && vm.IsEmpty)
    {
        lottie.Play();
    }
}

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