元素未在 Xamarin.Forms 中扩展

Question

使用StartAndExpand 或EndAndExpand 似乎并没有真正扩展StackLayout 中的元素。即使有更多可用空间，如蓝色区域所示。只有FillAndExpand 有效。

代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             xmlns:local="clr-namespace:App6"
             x:Class="App6.MainPage"
             ios:Page.UseSafeArea="True">

    <StackLayout BackgroundColor="Blue"
                 HeightRequest="100"
                 Orientation="Horizontal"
                 Spacing="0"
                 VerticalOptions="Start">
        <Label BackgroundColor="Red"
               HorizontalOptions="Start"
               Text="Hi" />
        <StackLayout BackgroundColor="Salmon"
                     HorizontalOptions="EndAndExpand"
                     Orientation="Vertical">
            <BoxView BackgroundColor="Red"
                     HeightRequest="30"
                     HorizontalOptions="End"
                     VerticalOptions="Center"
                     WidthRequest="30" />
        </StackLayout>
    </StackLayout>
</ContentPage>

这是我得到的：

当对子 StackLayout 使用 FillAndExpand 时，最重要的结果是不展开的 EndAndExpand，最后是同样不展开的 StartAndExpand。

如果父元素有更多空间，难道不应该扩展元素吗？如果是，那为什么StartAndExpand 和EndAndExpand 不起作用？

注意：仅在 Android 上使用 Xamarin.Forms 版本 3.4.0.1008975 进行测试。

Answer 1

参考@AndroDevil 注释，空间实际上分布在StackLayout 的子元素之间，但它们无法填充它，除非它们的布局选项包含Fill。它的工作方式或多或少类似于 FlexLayout 的选项之间的空间。

我刚刚在 StackLayout 中添加了另一个元素，现在更清楚了发生了什么。

代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             xmlns:local="clr-namespace:App6"
             x:Class="App6.MainPage"
             ios:Page.UseSafeArea="True">

    <StackLayout BackgroundColor="Blue"
                 HeightRequest="100"
                 Orientation="Horizontal"
                 Spacing="0"
                 VerticalOptions="Start">
        <Label BackgroundColor="Red"
               HorizontalOptions="Start"
               Text="Hi" />

        <Label BackgroundColor="Red"
               HorizontalOptions="EndAndExpand"
               Text="Bye" />

        <StackLayout BackgroundColor="Salmon"
                     HorizontalOptions="EndAndExpand"
                     Orientation="Vertical">
            <BoxView BackgroundColor="Red"
                     HeightRequest="30"
                     HorizontalOptions="End"
                     VerticalOptions="Center"
                     WidthRequest="30" />
        </StackLayout>
    </StackLayout>
</ContentPage>

我得到了什么：

所以Expand 的意思如下：

• StartAndExpand：给我更多的空间，但把我放在左边。
• CenterAndExpand：给我更多的空间，但把我放在中间。
• EndAndExpand：给我更多的空间，但把我放在右边。
• FillAndExpand：给我更多空间，我会填满的。

Answer 2

原因： 在 stackLayout 中添加标签时，stackLayout 不会使子视图适合大小。

解决方案：

将标签放在网格中。参考以下代码。

例如：如果要将标签“Hi”设置为屏幕宽度的一半

<Grid BackgroundColor="Blue" >
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label  HeightRequest="100" Grid.Row="0" Grid.Column="0"  Text="Hi" BackgroundColor="Red" />
    <BoxView  Grid.Row="0" Grid.Column="1" BackgroundColor="Red"
                 HeightRequest="30"
                 HorizontalOptions="End"
                 VerticalOptions="Center"
                 WidthRequest="30"/>

</Grid>