使用Xamarin XAML表单的堆叠布局排版问题

Question

我有以下代码：

  <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Margin="0,10,0,10" BackgroundColor="Green" Padding="5,5,5,5">
        <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Margin="0,0,0,0" BackgroundColor="Blue">
              <Label Text="SHOW COMPLETED TASKS" BackgroundColor="Red" Style="{StaticResource lblSubHeading_Black}" />
        </StackLayout>
        <Switch x:Name="CompletedJobsSwitch" Toggled="CompletedJobsSwitch_Toggled" HorizontalOptions="EndAndExpand" IsToggled="{Binding isOn}" BackgroundColor="Yellow"/>
  </StackLayout>

一切都正常加载，但应用程序加载时显示，但开关不在最右边。为什么？这真的很烦人，似乎非常不一致。我已经查看了此处，但对我无效。 有任何想法吗？

- Welsh King

---

不是不一致的问题。 StackLayout 只占用所需的空间。尝试在最高级别上放置一个 Grid。 - Gerald Versluis

当我说inconstant时，我的意思是Xamarin Forms的XAML，但我已经将StackLayout设置为填充和展开，为什么它没有这样做？添加一个Grid似乎只是掩盖了这个问题。 - Welsh King

你不需要添加一个网格，只需将顶层的StackLayout替换为一个Grid。 - Gerald Versluis

Answer 1

使用此功能

<Grid BackgroundColor="Green">
  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="auto" />
  </Grid.ColumnDefinitions>
  <Label Text="SHOW COMPLETED TASKS" BackgroundColor="Red" />
  <Switch x:Name="CompletedJobsSwitch" BackgroundColor="Yellow" Grid.Column="1" />
</Grid>

- Ive

---

这个解决方案对我也非常有效。我遇到了一个类似的问题，使用Orientation="Horizontal"的StackLayout，最后一项是设置了HorizontalOptions="End"的开关。在所有大小的Android屏幕和更宽的IOS屏幕上都可以正常工作（将开关对齐到屏幕右侧），但在较小的IOS屏幕上，开关会像您所描述的那样向左滑动。上面的Grid方法在我测试的所有屏幕上都可以正常工作。 - Curtis Herrick

Answer 2

这是关于StackLayout和Label组合的众所周知的问题：

• Bugzilla # 28650
• Bugzilla # 31128
• Bugzilla # 33841

您可以使用JamesMontemagno描述的解决方法。关键是在这种情况下使用Grid而不是StackLayout。

- Mikalai Daronin

Answer 3

也许我来晚了，一些错误已经被修复，但对于通过搜索到达此处的其他人：

对于左侧项目，请使用HorizontalOptions="StartAndExpand"
对于右对齐项目，请使用HorizontalOptions="End"
开关是固定长度组件，因此不要使用expand。如果您使用EndAndExpand，则会向右添加一些填充物，破坏您的右对齐。
标签希望填充剩余空间，因此请告诉它进行扩展。

 <StackLayout VerticalOptions="Start" Orientation="Horizontal" Margin="0,10,0,10" BackgroundColor="Green" Padding="5,5,5,5">
            <Label Text="SHOW COMPLETED TASKS" BackgroundColor="Red"  HorizontalOptions="StartAndExpand"  />
            <Switch x:Name="CompletedJobsSwitch"  HorizontalOptions="End" IsToggled="false" BackgroundColor="Yellow"/>
</StackLayout>

- Mike_p