StackLayout 在 iOS 上忽略 EndAndExpand答案

【问题标题】：StackLayout ignoring EndAndExpand on iOSStackLayout 在 iOS 上忽略 EndAndExpand
【发布时间】：2018-02-23 03:22:31
【问题描述】：

iOS 中的 Xamarin.Forms 中似乎存在一个已确认的错误，当您的 内容/标签的文本太大，需要 2 行才能在 StackLayout 中显示时（假设layoutA)，其他兄弟元素和父元素采用 layoutA 的宽度。

Kent Boogaart filled a Bug 用下面的例子重现错误。

<StackLayout Margin="0,20,0,0">
    <!-- works (by virtue of no wrapping) -->
    <StackLayout Orientation="Horizontal">
        <Switch/>
        <Label Text="Some text"/>
        <Button Text="A Button" HorizontalOptions="EndAndExpand"/>
    </StackLayout>

    <!-- works (by virtue of no switch) -->
    <StackLayout Orientation="Horizontal">
        <Label Text="Some longer text that wraps over two lines"/>
        <Button Text="A Button" HorizontalOptions="EndAndExpand"/>
    </StackLayout>

    <!-- does not work -->
    <StackLayout Orientation="Horizontal">
        <Switch/>
        <Label Text="Some longer text that wraps over two lines"/>
        <Button Text="A Button" HorizontalOptions="EndAndExpand"/>
    </StackLayout>
</StackLayout>

是否有针对此问题的解决方案/修复/解决方法？

编辑

这里是使用的代码：

<ListView HasUnevenRows="True" SeparatorVisibility="None" HorizontalOptions="StartAndExpand" CachingStrategy="RecycleElement">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#eee" Padding="5" Margin="5" >
                    <ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="Start" HeightRequest="75" Source="{Binding ID, StringFormat='https://example/api/{0}'}" CacheDuration="15">
                        <ffimageloading:CachedImage.Transformations>
                            <fftransformations:CircleTransformation/>
                        </ffimageloading:CachedImage.Transformations>
                    </ffimageloading:CachedImage>
                    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
                        <Label Text="{Binding Name}" TextColor="#f35e20" HorizontalOptions="FillAndExpand"/>
                        <Label Text="{Binding Description}" HorizontalOptions="FillAndExpand" TextColor="#503026" />
                        <Label Text="{Binding ID}" x:Name="ID" IsVisible="False"></Label>
                        <Button Text="Ver productos" TextColor="#FF5F6D" HorizontalOptions="End" BackgroundColor="Transparent"></Button>
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

这些是该应用在 iOS 中的实际屏幕截图，在 Android 中它运行良好。

如您所见，在 Image1 中，第一张卡片没问题，按钮（“Agregar al carrito”或“Ver Productos”）位于最后。

但在第二张卡片中，由于文字太大，按钮从卡片中掉了出来。

在第二张图片中，中间的文本需要 2 行，并且包裹内容（2 个标签和按钮）的 StackLayout 与带有大文本的标签一样宽。

我在大文本中画了一个红色方块和一条红线，因此您可以看到，由于文本大，StackLayout 变窄了。

【问题讨论】：

StackLayouts 非常笨拙，大多数时候最好的办法是尽可能将其替换为带有行和列的Grid。我现在不在电脑前，所以明天我会尝试你的示例来寻找解决方法。
您能否发布一张图片（即使只是用 MS Paint 绘制）以更好地解释问题所在，与您期望看到的相比？

标签： xamarin xamarin.forms xamarin.ios

【解决方案1】：

这是一个已知问题，即在 Cell 内的 stacklayout 上设置填充时，行高显示不正确。

解决方法：使用`StackLayout`将内容包裹在Cell下面。

<ViewCell>
    <StackLayout >  //add this 
        <StackLayout Orientation="Horizontal" Padding="5" Margin="5" >
             </ffimageloading:CachedImage>
             <StackLayout BackgroundColor="Brown" Orientation="Vertical">
                 <Label TextColor="#f35e20" HorizontalOptions="FillAndExpand"/>
                 <Label/>
                 <Label Text="fff" x:Name="ID" IsVisible="False"></Label>
                 <Button   Text="Ver productos" TextColor="#FF5F6D"  BackgroundColor="Yellow"></Button>
              </StackLayout>
        </StackLayout>                            
    </StackLayout>
</ViewCell>

【讨论】：

编辑

解决方法：使用StackLayout将内容包裹在Cell下面。

解决方法：使用`StackLayout`将内容包裹在Cell下面。