Question

我有3帧，每帧包含1个图像/图标和1个文本标签。

我有以下代码：

<StackLayout Spacing="0" Padding="0">
   <Frame CornerRadius="3" BackgroundColor="#4167b2" HeightRequest="45" Margin="35" Padding="0" HasShadow="false">
   <StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
      <Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/facebook.png" />
      <Label Text="Login com facebook" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
      <StackLayout.GestureRecognizers>
         <TapGestureRecognizer x:Name="FacebookButton" AutomationId="FacebookButton" Command="{Binding FacebookButtonCommand}" />
      </StackLayout.GestureRecognizers>
   </StackLayout>
   </Frame>
   <Frame CornerRadius="3" BackgroundColor="#D44638" HeightRequest="45" Margin="35" Padding="0" HasShadow="false" >
   <StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
      <Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/gmail.png" />
      <Label Text="Login com g-mail" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
      <StackLayout.GestureRecognizers>
         <TapGestureRecognizer x:Name="GmailButton" AutomationId="GmailButton" Command="{Binding GmailButtonCommand}" />
      </StackLayout.GestureRecognizers>
   </StackLayout>
   </Frame>
   <Frame CornerRadius="3" BackgroundColor="#1dcaff" HeightRequest="45" Margin="35" Padding="0" HasShadow="false" >
   <StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
      <Image HeightRequest="80" Aspect="AspectFill" Source="https://img.icons8.com/color/120/000000/twitter-squared.png" />
      <Label Text="Login com twitter" VerticalOptions="CenterAndExpand" FontSize="20" FontAttributes="Bold" TextColor="White" />
      <StackLayout.GestureRecognizers>
         <TapGestureRecognizer x:Name="TwitterButton" AutomationId="TwitterButton" Command="{Binding TwitterButtonCommand}" />
      </StackLayout.GestureRecognizers>
   </StackLayout>
   </Frame>
</StackLayout>

但是它使按钮彼此之间距离很远。我希望它们彼此靠近且在同一列中。有人可以帮忙吗？

Answer 1

您在每帧上使用非常大的边距值（35）。页边距适用于在其上指定的每个元素-因此，帧之间的间距为70像素（35 + 35顶部和底部）。

可以将左，上，右，下边距/填充指定为逗号分隔值（您可以使用2个逗号分隔值来匹配left / right和to，而不是将其应用于元素周围的单个值）。 /底部间距）。

也许尝试Margin =“ 35,0,35,0”保持左右间距并最小化上下间距。请注意，这可以简化为Margin =“ 35,0”-这种格式35适用于左侧和右侧，零适用于顶部和底部。

没有理由上下左右都相同-您可以调整每种以获得最佳效果。

查看此链接：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding

如何将这些框架垂直并排放置？

1 个答案: