Android中使用FadeTo时ContentView无法显示的问题排查

问题描述 #

我有一个自定义ContentView，XAML初始属性设置如下：

Opacity="0"
InputTransparent="True"
IsVisible="false"
BackgroundColor="Transparent"

后台C#代码用于控制视图的显示/隐藏动画：

// 动画起始与结束位置参数
readonly double yPosOrigin = 30;
readonly double yPosOpen = 0;
readonly uint animationSpeed = 150;

new public event PropertyChangedEventHandler PropertyChanged;

public FoodFullView()
{
    InitializeComponent();
    TranslationY = -yPosOrigin;
}

private async void OpenAnimation()
{
    IsVisible = true;

    await Task.WhenAll(
        this.FadeTo(1, length: animationSpeed),
        this.TranslateTo(0, yPosOpen, length: animationSpeed, easing: Easing.SinIn));
    
    RaiseOnPropertyChanged(nameof(IsVisible));
    InputTransparent = false;
}

private async void CloseAnimation()
{
    InputTransparent = true;

    await Task.WhenAll(
        this.FadeTo(0, length: animationSpeed),
        this.TranslateTo(0, -yPosOrigin, length: animationSpeed, easing: Easing.SinIn));

    IsVisible = false;
    RaiseOnPropertyChanged(nameof(IsVisible));
    
    NumberChose.Quantity = 1;
    BindingContext = null;
}

当前问题：该视图在Windows平台可正常显示并执行动画，但在Android设备上完全无法显示。

针对Android平台的修复要点 #

1. 调整IsVisible的使用逻辑 #

Android平台中，IsVisible=false的视图会被直接从布局树中移除，后续即使设置IsVisible=true，也可能因布局未重新计算导致动画无法触发。建议改用Opacity和Translation控制视图隐藏，保持IsVisible始终为true：

修改XAML初始属性：

Opacity="0"
InputTransparent="True"
IsVisible="true" <!-- 改为true -->
BackgroundColor="Transparent"

调整动画代码：

public FoodFullView()
{
    InitializeComponent();
    TranslationY = -yPosOrigin;
}

private async void OpenAnimation()
{
    InputTransparent = false;
    
    await Task.WhenAll(
        this.FadeTo(1, length: animationSpeed),
        this.TranslateTo(0, yPosOpen, length: animationSpeed, easing: Easing.SinIn));
}

private async void CloseAnimation()
{
    InputTransparent = true;

    await Task.WhenAll(
        this.FadeTo(0, length: animationSpeed),
        this.TranslateTo(0, -yPosOrigin, length: animationSpeed, easing: Easing.SinIn));
    
    NumberChose.Quantity = 1;
    BindingContext = null;
}

2. 移除错误的PropertyChanged重写 #

代码中new public event PropertyChangedEventHandler PropertyChanged;会隐藏基类的属性变更通知事件，导致Android平台上属性更新无法触发视图刷新。改用标准的INotifyPropertyChanged实现：

// 移除原重写的事件声明
// new public event PropertyChangedEventHandler PropertyChanged;

// 保留标准的事件触发方法
protected virtual void RaiseOnPropertyChanged(string propertyName)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

3. 确保视图布局完成后再执行动画 #

Android平台下，若在视图未完成布局时触发动画，可能出现无显示的情况。可在动画前添加布局等待逻辑：

private async void OpenAnimation()
{
    // 等待视图完成布局计算
    await Task.Delay(16);
    // 或更精确的布局等待：await this.LayoutTo(new Rectangle(Bounds.X, Bounds.Y, Bounds.Width, Bounds.Height));
    
    InputTransparent = false;
    
    await Task.WhenAll(
        this.FadeTo(1, length: animationSpeed),
        this.TranslateTo(0, yPosOpen, length: animationSpeed, easing: Easing.SinIn));
}

4. 检查父容器裁剪属性 #

确认ContentView的父容器（如Grid、StackLayout）未设置IsClippedToBounds=true，否则视图位移出容器范围会被裁剪，导致无法显示。若需保留裁剪，需调整位移目标位置或容器尺寸。

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