在 Xamarin Flex 布局中选择换行元素答案

【问题标题】：Choosing wrap elements in Xamarin's Flex Layout在 Xamarin Flex 布局中选择换行元素
【发布时间】：2019-12-30 22:12:14
【问题描述】：

我本质上是想获得这个 css 问题答案的 Xamarin FlexLayout 版本：Flexbox: move middle element to the next line

我有一个相当简单的Xamarin Forms UI，它在一条水平线上有三个元素。根据可用的屏幕宽度，我需要将这些元素的中间换行到下一条垂直线。

我知道可以回退到 css 答案，但我正在寻找原生解决方案。

充足的宽度

┌────────────────────────────────────────┐
|                WRAPPER                 |
|   ┌─────────┬───────────┬──────────┐   |
|   |  LEFT   |   CENTER  |   RIGHT  |   |
|   |         |           |          |   |
|   └─────────┴───────────┴──────────┘   |
└────────────────────────────────────────┘

有限宽度

┌────────────────────────┐
|        WRAPPER         |
|  ┌────────┬─────────┐  |
|  |  LEFT  |  RIGHT  |  |
|  |        |         |  |
|  └────────┴─────────┘  |
|  ┌──────────────────┐  |
|  |      CENTER      |  |
|  |                  |  |
|  └──────────────────┘  |
|                        |
└────────────────────────┘

我显然看不到任何方法可以做到这一点，尽管从逻辑上讲，一旦发生换行，可能可以为中心元素调整 FlexLayout.Order="x"，但我不确定如何触发该事件。

【问题讨论】：

标签： xaml xamarin.forms

【解决方案1】：

您可以检查以下代码

<FlexLayout  AlignContent="Center"  JustifyContent="Center"  Wrap="Wrap" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"  >


    <Label Text="Left"
               HeightRequest="50"
               FontSize="Large"
               WidthRequest="150"
               BackgroundColor="Gray"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"

               FlexLayout.Order="1"
               />

    <Label Text="Center"
               FontSize="Large"
               HeightRequest="50"
               WidthRequest="300"
               BackgroundColor="Red"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"

               FlexLayout.Order="3"
              />

    <Label Text="Right"
               FontSize="Large"
               WidthRequest="150"
               BackgroundColor="Gray"
               HeightRequest="50"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"
               FlexLayout.Order="2"
              />

</FlexLayout>

FlexLayout的更多细节和用法可以参考https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.flexlayout?view=xamarin-forms

【讨论】：

谢谢，虽然这适用于较窄的宽度，但对于较大的宽度，它会将 Center 框定位在错误的位置：[ Left ] [ Right ] [ Center ]
因为我将标签的宽度设置为静态值只是为了演示，所以这将是一个预期的结果。您需要根据需要设置标签的宽度。
屏幕宽度小于三个标签宽度时会发生翘曲。
抱歉，我一定是遗漏了一些东西，当我将示例中的三个 WidthRequest 值设置为“50”（例如）时，我得到以下信息：1drv.ms/u/s!AiFOTk4n4xTsgZZKXGkXa-dHFdd5uQ?e=1FKauJ
因为 width 的值太小了。正如我所说，当屏幕宽度小于三个标签的宽度时，它会变形。

【解决方案2】：

现在工作。对于其他需要它的人，按照 Lucas Zhang 的指南，我命名了中间标签并在代码中处理它，如下所示：

<Label  x:Name="MiddleLabel"
        BackgroundColor="Red"
        FlexLayout.Order="2"
        FontSize="Large"
        HeightRequest="50"
        HorizontalTextAlignment="Center"
        Text="Center"
        VerticalTextAlignment="Center"
        WidthRequest="150" />

protected override void OnSizeAllocated(double width, double height) {
            base.OnSizeAllocated(width, height);

            if (width >= height)
            {
                FlexLayout.SetOrder(MiddleLabel, 2);
            }
            else
            {
                FlexLayout.SetOrder(MiddleLabel, 4);

            }
        }

【讨论】：