Xamarin.forms 包装两个堆叠FlexLayouts中的一个

我有一个包含两个FlexLayouts的水平StackLayout。StackLayout在屏幕右上角对齐。现在，我希望左FlexLayout（这里称为LeftStack，请参阅下面的代码）能够水平增长，并且一旦一行中的项目太多；换行换行。我试过两件事

将“包裹”属性设置为“包裹”，但左侧FlexLayout会立即包裹每个项目，而不是水平展开FlexLayout，我会得到一列项目：(

将方向设置为RowReverse，这会导致左侧FlexLayout的所有项消失。这是出乎意料的：(

当一行中有太多的项目时，如何让左侧FlexLayout包装？第一个包装的项目应该显示在深绿色的BoxView下面。屏幕截图显示了我想要实现的目标（而不是发布代码的结果）。有没有办法让左侧FlexLayout包装

)

---

如果设置

LeftStack的
WidthRequest
，则将能够水平增长。并且需要删除每个
BoxView
的
FlexLayout.grow

...
<FlexLayout x:Name="LeftStack"
            JustifyContent="End"
            WidthRequest="300"
            Wrap="Wrap">
    <BoxView BackgroundColor="DarkRed"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkGray"
                WidthRequest="100"
                HeightRequest="60"/>
    <BoxView BackgroundColor="DarkGreen"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkKhaki"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkMagenta"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="Firebrick"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkCyan"
                WidthRequest="100"
                HeightRequest="60"/>
    <BoxView BackgroundColor="DarkSlateGray"
                WidthRequest="100"
                HeightRequest="60" />
</FlexLayout>
...

现在的效果是：

您好，很抱歉没有太多地理解您的需求，您能分享另一张图片来解释所需的效果吗？@JuniorJiang MSFT我更改了我的问题，以便更清楚地了解我想要实现的目标。很遗憾，将方向更改为列并不能解决问题。我想要的是，红色的boxview从那里换行单排空间不足。包装后应放在深蓝色的下面box@MouseOnMars好的，如果为
LeftStack
设置
WidthRequest
将实现这一点，我将更新答案。有没有一种方法可以在没有宽度请求的情况下实现这一点？理想情况下，该解决方案应该适用于任何类型的设备，因此我无法使用指定一个硬编码的宽度。@MouseOnMars此处需要设置宽度请求，因为根布局是
StackLayout
。因此，flexlayout的元素不能自动增长。@MouseOnMars如果使用
flexlayout
作为根布局将不需要设置宽度请求，请查看我的更新答案。
...
<FlexLayout x:Name="LeftStack"
            JustifyContent="End"
            WidthRequest="300"
            Wrap="Wrap">
    <BoxView BackgroundColor="DarkRed"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkGray"
                WidthRequest="100"
                HeightRequest="60"/>
    <BoxView BackgroundColor="DarkGreen"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkKhaki"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkMagenta"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="Firebrick"
                WidthRequest="100"
                HeightRequest="60" />
    <BoxView BackgroundColor="DarkCyan"
                WidthRequest="100"
                HeightRequest="60"/>
    <BoxView BackgroundColor="DarkSlateGray"
                WidthRequest="100"
                HeightRequest="60" />
</FlexLayout>
...

<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="End" BackgroundColor="AntiqueWhite">

    <FlexLayout x:Name="LeftStack"
                FlexLayout.Grow="3"
                JustifyContent="End"
                Wrap="Wrap">
        <BoxView BackgroundColor="DarkRed"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="DarkGray"
                    WidthRequest="100"
                    HeightRequest="60"/>
        <BoxView BackgroundColor="DarkGreen"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="DarkKhaki"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="DarkMagenta"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="Firebrick"
                    WidthRequest="100"
                    HeightRequest="60" />
        <BoxView BackgroundColor="DarkCyan"
                    WidthRequest="100"
                    HeightRequest="60"/>
        <BoxView BackgroundColor="DarkSlateGray"
                    WidthRequest="100"
                    HeightRequest="60" />

</FlexLayout>

    <FlexLayout x:Name="RightStack" FlexLayout.Grow="1" Margin="10,0,0,0"
                Direction="Row">
        <BoxView BackgroundColor="LightCoral"
                    WidthRequest="60"
                    HeightRequest="60"
                    FlexLayout.Grow="1" />
        <BoxView BackgroundColor="LightGreen"
                    WidthRequest="60"
                    HeightRequest="60"
                    FlexLayout.Grow="1" />
    </FlexLayout>
</FlexLayout>