Question

我正在尝试在XAML中为Xamarin表单应用构建以下布局。

这是我的代码

<AbsoluteLayout
    HorizontalOptions="FillAndExpand"
    HeightRequest="350">
    <Frame
        AbsoluteLayout.LayoutFlags="SizeProportional"
        AbsoluteLayout.LayoutBounds="0,0,1,1"
        BackgroundColor="White"
        HasShadow="true"
        CornerRadius="10"
        Margin="20,25,20,25">
        <StackLayout>
        </StackLayout>
    </Frame>
    <Image
        AbsoluteLayout.LayoutFlags="PositionProportional"
        AbsoluteLayout.LayoutBounds="0.5,1,50,50"
        Source=“icon.png”/>
</AbsoluteLayout>

它在IOS上运行良好，但在android中没有正确显示图标图像。请看下面的截图。

请帮我解决！

Answer 1

我在Android中将圆形图像覆盖在框架上时遇到了同样的问题。

修复：：请将Frame HasShadow属性设置为“ false”，这应该可以解决问题。

Answer 2

试试这个。

<AbsoluteLayout HorizontalOptions="FillAndExpand" HeightRequest="350">
            <Frame AbsoluteLayout.LayoutFlags="SizeProportional" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" 
                   BackgroundColor="White" HasShadow="true"
                   CornerRadius="10"
                   Margin="20,25,20,25">
                <StackLayout>
                </StackLayout>
            </Frame>
            <Frame  AbsoluteLayout.LayoutFlags="PositionProportional" Padding="0,0,0,0"
                    AbsoluteLayout.LayoutBounds="0.5,1,50,50" VerticalOptions="Fill" HorizontalOptions="Fill">
                <Image Margin="0,0,0,0"  Aspect="AspectFill" Source="icon.png"/>
            </Frame>
        </AbsoluteLayout>

截图

Answer 3

@ nitish-gawde的回答对我来说并不适用于图像的框架HasShadow设置为false。然而，对我有用的解决方法是将第一帧放在另一个布局（比如StackLayout）中：

<AbsoluteLayout HorizontalOptions="FillAndExpand" HeightRequest="350">
    <StackLayout
    AbsoluteLayout.LayoutFlags="SizeProportional" 
    AbsoluteLayout.LayoutBounds="0.5,0.5,1,1">

        <Frame
            HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
               BackgroundColor="White" HasShadow="true"
               CornerRadius="10"
               Margin="20,25,20,25">
                <StackLayout>
                </StackLayout>
            </Frame>
</StackLayout

     <Frame HasShadow = "False"
        AbsoluteLayout.LayoutFlags="PositionProportional" Padding="0,0,0,0"
                AbsoluteLayout.LayoutBounds="0.5,1,50,50" 
         VerticalOptions="Fill" HorizontalOptions="Fill">
            <Image Margin="0,0,0,0"  Aspect="AspectFill" Source="icon.png"/>
      </Frame>
</AbsoluteLayout>

截图：

Xamarin Android中Frame的图像重叠问题

3 个答案:

修复：：请将Frame HasShadow属性设置为“ false”，这应该可以解决问题。