Xamarin.Forms - 两个 StackLayouts 之间的额外空间答案

【问题标题】：Xamarin.Forms - Extra space between two StackLayoutsXamarin.Forms - 两个 StackLayouts 之间的额外空间
【发布时间】：2017-03-14 18:55:03
【问题描述】：

我有一个如下所示的 Xamarin.Forms XAML 设置，但不知道为什么两个 StackLayout 实例之间有额外的空间。我尝试将填充设置为 0 并将边距设置为 0，但在最后一个 StackLayout 之间和末尾仍有空间。

<StackLayout Spacing="0" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" HeightRequest="500" Margin="0" Padding="0">
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" HeightRequest="20" Margin="0" Padding="0">
          <Label Text="MyTest" HorizontalOptions="Center"></Label>
        </StackLayout>
        <StackLayout VerticalOptions="CenterAndExpand" Padding="10,0,10,0" HeightRequest="500" Margin="0">
          <ListView x:Name ="listView" ItemsSource="{Binding MyBinding}">
            <ListView.ItemTemplate>
              <DataTemplate>
                <ViewCell>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="0.9*" />
                      <ColumnDefinition Width="0.1*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" Text="{Binding MyName}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
                    <Label Grid.Column="1" Text="{Binding MyValue}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
                  </Grid>
                </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
          </ListView>
        </StackLayout>
      </StackLayout>

【问题讨论】：

Remove 'Padding="10,0,10,0"' 它在你的堆栈布局和最后添加填充。我建议重新考虑你的布局，尝试优化它，目前你有 3 个堆栈布局，也许一个网格会更好地满足你的需求？
一张图片值一千字，它会显示您在哪里看到这些空间，让我们更容易提供解决方案。

标签： xamarin xamarin.forms

【解决方案1】：

您似乎没有为第一个 StackLayout 设置任何 VerticalOptions，这就是为什么当您将另一个 StackLayout 设置为 VerticalOption 为 CenterAndExpand 时它只是包装标签并留下空白空间。

要解决此问题，您有几个选项：

1：将 VerticalOption 设置为 FillAndExpand 到包含 ListView 的 StackLayout

    <StackLayout VerticalOptions="FillAndExpand" Padding="10,0,10,0" HeightRequest="500" Margin="0">
      <ListView x:Name ="listView" ItemsSource="{Binding MyBinding}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="0.9*" />
                  <ColumnDefinition Width="0.1*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Text="{Binding MyName}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
                <Label Grid.Column="1" Text="{Binding MyValue}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
              </Grid>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>

2：将 VerticalOption 设置为 EndAndExpand 到带有 Label 的第一个 StackLayout，将 VerticalOption 设置为 StartAndExpand 到带有 List 的第二个 StackLayout。

    <StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" HeightRequest="20" Margin="0" Padding="0">
      <Label Text="MyTest" HorizontalOptions="Center"></Label>
    </StackLayout>

    <StackLayout VerticalOptions="StartAndExpand" Padding="10,0,10,0" HeightRequest="500" Margin="0">
      <ListView x:Name ="listView" ItemsSource="{Binding MyBinding}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="0.9*" />
                  <ColumnDefinition Width="0.1*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Text="{Binding MyName}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
                <Label Grid.Column="1" Text="{Binding MyValue}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
              </Grid>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>

测试两者，看看哪一个更适合您的设计需求，因为每一个都会以不同的方式放置 UI 控制器。

希望这会有所帮助。-

【讨论】：

不错的指针，但它们都不能与堆叠在网格顶部的列表视图一起使用......那我运气不好

【解决方案2】：

您可以将父布局的间距设置为 -6。间距是设备像素中的一个值，表示每个元素之间的空间量。默认值为 6.0....

【讨论】：

这对我有用。谢谢。我将父 StackLayout 的间距设置为 0。

【解决方案3】：

您可以随时尝试添加负边距值。我有一个类似的问题，我可以通过在第二个布局中添加 -5 的边距来解决。

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" >
    <StackLayout x:Name="lOne" Orientation="Horizontal" VerticalOptions="Start" />
    <StackLayout x:Name="lTwo" Orientation="Horizontal" Margin="-5" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" Padding="10"/>
</StackLayout>

lT 有一个空间，我在添加背景颜色时可以看到。当我在其中添加 Margin="-5" 时，空间消失了。

【讨论】：