Question

我在xamarin中有一个页面，其中有几个框架，所有框架都带有图像（颜色）和文本。但是，我面临的问题是，图像（颜色）的边距在不同的手机（分辨率）上看起来不同。如下图所示，图像在Galaxy S8上的正确位置（分辨率1440x2960）和在Galaxy S10e上的错误位置（分辨率1080 x 2280）。

我在框架上使用以下代码：

<Grid ColumnSpacing="12.5" RowSpacing="12.5" Padding="10" HeightRequest="500">
            <Grid.RowDefinitions>
                <RowDefinition Height="0.8*" />
                <RowDefinition Height="4.5*" />
                <RowDefinition Height="1.5*" />
                <RowDefinition Height="1.5*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

<Frame x:Name="frame_Sport" Grid.Row="2" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
    <Frame.GestureRecognizers>
        <TapGestureRecognizer Tapped="Sport_Clicked"/>
    </Frame.GestureRecognizers>
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
        <StackLayout Orientation="Horizontal" >

            <Label Text="    Sport" FontSize="18"/>
        </StackLayout>
        <StackLayout Orientation="Vertical" >
            <Label x:Name="txt_Sport" FontSize="18"/>
        </StackLayout>
        <Image Source="mark_green.png" Scale="0.17" Margin="-110,-137,0,0"/>
    </StackLayout>
</Frame>

<Frame x:Name="frame_Voeding" Grid.Row="2" Grid.RowSpan="2" Grid.Column="1" >
    <Frame.GestureRecognizers>
        <TapGestureRecognizer Tapped="Voeding_Clicked"/>
    </Frame.GestureRecognizers>
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
        <Label Text="    Voeding" FontSize="18" />
        <Label x:Name="txt_Voeding1" FontSize="18" Margin="0,-0.6"/>
        <Label x:Name="txt_Voeding2" FontSize="18" Margin="0,-0.6"/>
        <Label x:Name="txt_Voeding3" FontSize="18" Margin="0,-0.6"/>
        <Label x:Name="txt_Voeding4" FontSize="18" Margin="0,-0.6"/>
        <Label x:Name="txt_Voeding5" FontSize="18" Margin="0,-0.6"/>
        <Label x:Name="txt_Voeding6" FontSize="18" Margin="0,-0.6"/>
        <Image Source="mark_red.png" Scale="0.17" Margin="-110,-280,0,0"/>
    </StackLayout>

</Frame>

<Frame x:Name="frame_Slaap" Grid.Row="3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
    <Frame.GestureRecognizers>
        <TapGestureRecognizer Tapped="Slaap_Clicked"/>
    </Frame.GestureRecognizers>
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
        <StackLayout Orientation="Horizontal" >
            <Label Text="    Slaap" FontSize="18" />
        </StackLayout>
        <StackLayout Orientation="Vertical">
            <Label x:Name="txt_Slaap" FontSize="18" />
        </StackLayout>
        <Image Source="mark_blue.png" Scale="0.17" Margin="-110,-137,0,0"/>
    </StackLayout>
</Frame>
</Grid>

为什么两部手机上的图像（颜色）看起来都不同，我该如何解决？

Answer 1

边距的值以绝对单位（像素）为单位。

包含StackLayout的Frame在每个设备上具有不同的绝对宽度。因此，如果分辨率或dpi不同，则图标的位置也将不同。

在您的情况下，我将使用“图像”和类似的标签创建一个水平堆栈布局：

<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
    <StackLayout Orientation="Horizontal">
        <Image Source="mark_red.png" Scale="0.17"/>
        <Label Text="Voeding" FontSize="18" />
    </StackLayout>
    <Label x:Name="txt_Voeding1" FontSize="18" Margin="0,-0.6"/>
    ...
</StackLayout>

Answer 2

我在xamarin中有一个页面，其中有几个框架，所有框架都带有图像（颜色）和文本。但是，我面临的问题是，图像（颜色）的边距在不同的手机（分辨率）上看起来不同。如下图所示，图像在Galaxy S8上的正确位置（分辨率1440x2960）在Galaxy S10e上的错误位置（分辨率1080 x 2280）。

发生这种情况的原因是不同的设备具有不同的密度。当涉及Margin时，它是一个双精度值，Xamarin Forms将此双精度值分别转换为特定于平台的类型（例如Dp，Points）。因此，每个设备根据其自身的大小和密度以不同的方式响应相同的裕量。同样，密度也会影响颜色。如果设备具有更高的像素，即使颜色相同，人类对颜色的感知也会改变，但对我们来说看起来有些不同！基本上，设备中的像素越密集，裸眼的颜色就越鲜艳。

现在回到这个问题，即您的保证金看起来不同的原因与我上面解释的原因相同，现在要解决此问题，您可能想要删除StackLayout，而使用Grid并定义适当对齐的列定义方式。

 <Grid>
   <Grid.ColumnDefinitions> <--<Define these as they suit you>-->
       .
       . 
   </Grid.ColumnDefinitions>
    <Image Grid.Column="0" Source="mark_red.png" Scale="0.17"/>
    <Label Grid.Column="1" Text="Voeding" FontSize="18" />
</Grid>

或增加StackLayout的Spacing属性，使其在图像和标签之间添加一些额外的空间：

 <StackLayout Orientation="Horizontal" Spacing="10"> <--<Default spacing is 6>-->
    <Image Source="mark_red.png" Scale="0.17"/>
    <Label Text="Voeding" FontSize="18" />
</StackLayout>

更新：

您的XAML应该如下所示：

<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="mark_red.png" Scale="0.17"/>
<Label Grid.Column="1" Text="Voeding" FontSize="18" />
<StackLayout Grid.Row="1" Grid.ColumnSpan="2" >
    <Label x:Name="txt_Voeding1" FontSize="18" Margin="0,-3"/>
    <Label x:Name="txt_Voeding2" FontSize="18" Margin="0,-3"/>
    <Label x:Name="txt_Voeding3" FontSize="18" Margin="0,-3"/>
    <Label x:Name="txt_Voeding4" FontSize="18" Margin="0,-3"/>
    <Label x:Name="txt_Voeding5" FontSize="18" Margin="0,-3"/>
    <Label x:Name="txt_Voeding6" FontSize="18" Margin="0,-3"/>
</StackLayout>
</Grid>

Xamarin页边距在两种分辨率（设备）之间是不同的

2 个答案: