.NET MAUI Android横屏模式下LinearGradientBrush失效问题求助

问题场景 #

在.NET MAUI应用中，我在背景图上方通过LinearGradientBrush实现淡出过渡效果，iOS端横竖屏模式下显示均正常平滑，但Android端仅竖屏正常，横屏时渐变效果失效，呈现生硬的边缘过渡。相关代码如下：

XAML布局代码 #

<Grid RowDefinitions="Auto, *">

    <!-- BackgroundImage and LinearGradient -->
    <Image x:Name="BackgroundImage" Grid.Row="0" Source="radiant_gradient.png" Aspect="AspectFill"/>
    <ScrollView Grid.Row="0">
        <ScrollView.Background>
            <LinearGradientBrush EndPoint="0,1">
                <GradientStop Color="Transparent" Offset="0.1" />
                <GradientStop Color="White" Offset="1.0" />
            </LinearGradientBrush>
        </ScrollView.Background>
    </ScrollView>

    <ScrollView x:Name="ScrollView" Grid.Row="0" Grid.RowSpan="2" VerticalScrollBarVisibility="Always" BackgroundColor="Transparent" VerticalOptions="StartAndExpand">
    
    </ScrollView>

</Grid>

后台尺寸适配代码 #

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);

    if (height > 0)
    {
        BackgroundImage.HeightRequest = height * 0.7;
    }
}

我曾尝试用内部Grid替代承载渐变的ScrollView，但无效果，需要让Android横屏模式下的显示效果与iOS一致。

解决方案 #

方案1：用View替代空ScrollView承载渐变 #

Android对空ScrollView的背景渐变存在布局重绘逻辑问题，这里不需要ScrollView的滚动功能，直接用View作为渐变遮罩层即可：

修改后的XAML代码：

<Grid RowDefinitions="Auto, *">

    <!-- BackgroundImage and LinearGradient -->
    <Image x:Name="BackgroundImage" Grid.Row="0" Source="radiant_gradient.png" Aspect="AspectFill"/>
    <!-- 替换空ScrollView为View，专门承载渐变背景 -->
    <View Grid.Row="0">
        <View.Background>
            <LinearGradientBrush EndPoint="0,1">
                <GradientStop Color="Transparent" Offset="0.1" />
                <GradientStop Color="White" Offset="1.0" />
            </LinearGradientBrush>
        </View.Background>
    </View>

    <ScrollView x:Name="ScrollView" Grid.Row="0" Grid.RowSpan="2" VerticalScrollBarVisibility="Always" BackgroundColor="Transparent" VerticalOptions="StartAndExpand">
    
    </ScrollView>

</Grid>

额外优化：绑定渐变容器高度

为确保渐变层完全匹配背景图尺寸，可将View的高度绑定到背景图的实际高度：

<View Grid.Row="0" HeightRequest="{Binding Source={x:Reference BackgroundImage}, Path=Height}">
    <View.Background>
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Transparent" Offset="0.1" />
            <GradientStop Color="White" Offset="1.0" />
        </LinearGradientBrush>
    </View.Background>
</View>

方案2：用AbsoluteLayout确保层叠布局精准 #

如果方案1仍有布局偏差，可使用AbsoluteLayout强制渐变层完全覆盖背景图：

<Grid RowDefinitions="Auto, *">
    <AbsoluteLayout Grid.Row="0">
        <Image x:Name="BackgroundImage" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Source="radiant_gradient.png" Aspect="AspectFill"/>
        <View AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
            <View.Background>
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Color="Transparent" Offset="0.1" />
                    <GradientStop Color="White" Offset="1.0" />
                </LinearGradientBrush>
            </View.Background>
        </View>
    </AbsoluteLayout>

    <ScrollView x:Name="ScrollView" Grid.Row="0" Grid.RowSpan="2" VerticalScrollBarVisibility="Always" BackgroundColor="Transparent" VerticalOptions="StartAndExpand">
    
    </ScrollView>
</Grid>

以上两种方案都能避免Android横屏时的渐变重绘问题，让效果与iOS端保持一致。

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