包装两个堆叠的 FlexLayout 之一

Question

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

1. 将 Wrap 属性设置为 Wrap，但左侧的 FlexLayout 然后立即包装每个项目，而不是水平扩展 FlexLayout，我得到一列项目:(

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

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

)

<Grid VerticalOptions="Start">
        <StackLayout
            HorizontalOptions="End"
            Margin="0,50,0,0"
            Orientation="Horizontal"
            BackgroundColor="White">
            
            <FlexLayout x:Name="LeftStack" 
                        Direction="Row"
                        Wrap="Wrap">
                <BoxView BackgroundColor="DarkRed" WidthRequest="100" HeightRequest="60" FlexLayout.Grow="1"/>
                <BoxView BackgroundColor="DarkGray" WidthRequest="100" HeightRequest="60" FlexLayout.Grow="1"/>
            </FlexLayout>

            <FlexLayout x:Name="RightStack"
                        Direction="Row">
                <BoxView BackgroundColor="LightCoral" WidthRequest="60" HeightRequest="60" FlexLayout.Grow="1"/>
                <BoxView BackgroundColor="LightGreen" WidthRequest="60" HeightRequest="60" FlexLayout.Grow="1"/>
        </FlexLayout>
    </StackLayout>
</Grid>

Answer 1

如果设置了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>
...

效果：

注意：如果需要设置从右到左的增长方向，需要设置JustifyContent="End"。否则，默认为从左到右。

====================================更新=========== ======================

也可以使用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>

现在效果：