c# - Xamarin.Forms FlexLayout 将大小调整为最大值

Question

我的 Xamarin.Forms 应用程序中有一个 FlexLayout，它显示了一些框架。问题是，如果我设置 FlexLayout.Grow="1"，未完全填充列的最后帧将增长到它们填充列的大小。但是，如果我设置 FlexLayout.Grow="0"，每个列的末尾都会有一些空白区域。

正如您在 Allergens 下看到的那样，每列末尾都有一个小空间，当调整窗口大小时，该空间会增加，直到第五个项目适合该列(当 FlexLayout.增长 =“0” 集)。但是，如果我设置 FlexLayout.Grow="1" 将调整大小以填充整个列空间，直到第五个项目适合该列。然后所有项目将调整到最小。这是应该的，但我不希望最后的项目无限增长。看这张图片:

这是 FlexLayout 的代码:

                <StackLayout Grid.Row="11">
                    <flexLayouts:ExtendedFlexLayout Margin="5,0,5,0"
                                                    Direction="Row"
                                                    Wrap="Wrap"
                                                    VerticalOptions="Start"
                                                    AlignItems="Start"
                                                    JustifyContent="Start"
                                                    ItemsSource="{Binding Allergens}">
                        <flexLayouts:ExtendedFlexLayout.ItemTemplate>
                            <DataTemplate>
                                <details:BeverageDetailsView FlexLayout.Grow="1" />
                            </DataTemplate>
                        </flexLayouts:ExtendedFlexLayout.ItemTemplate>
                    </flexLayouts:ExtendedFlexLayout>
                </StackLayout>

有没有办法阻止剩余项目调整到那么大？ 感谢您的帮助

Answer 1

解决方案:

我认为右边空白的长度取决于你的item的widthRequest，而widthRequest会根据boxView的屏幕宽度和边距来计算。

比如你想把4个item排成一行，这里的boxMargin是10。

首先要获取屏幕宽度，可以引用http://stackoverflow.com/a/26504582/283974

然后，您可以计算项目的widthRequest。

因为一行有4个item，每个item都有左右边距，所以一排有8个margin。所以 screenWidth 应该减去 itemsInRow *2 * margin。

  float screenWidth = 375;//375 is an example ,you should use screen width in your code
  float margin = 10;
  float itemsInRow = 4;
  float widthRequest = (screenWidth - itemsInRow *2 * margin)/4; 

将widthRequest设置为Xaml中的项，则左右空格的长度将变得相同。

我在这里加一张图来说明一下: