Xamarin.Forms FlexLayout调整为最大值

时间:2018-11-06 09:51:23

标签: c# user-interface xamarin xamarin.forms

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

A simple example

如您在过敏原下看到的那样,每列的末尾都有一点空间,当调整Window的大小时,该空间会增大,直到第五项适合该列为止(当FlexLayout.Grow="0"组)。但是,如果我设置了FlexLayout.Grow="1",它将调整大小以填充整个列空间,直到第五个项目适合该列为止。然后,所有项目将调整为最小尺寸。这是应该的,但是我不希望最后的项目无限增长。看到这张图片:

enter image description here

这是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>

是否有办法阻止剩余项目调整为大项目? 感谢您的帮助

2 个答案:

答案 0 :(得分:1)

解决方案:

我认为右边空白的长度取决于您的for d in dir_list: os.mkdirs(d) 项。widthRequest将由boxView的屏幕宽度和边距计算。

例如,如果要连续放置4个项目,而boxMargin为10。

您应该首先获取屏幕宽度,可以参考http://stackoverflow.com/a/26504582/283974

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

因为连续有4个项目,每个项目都有左右边距,所以连续有8个边距。因此widthRequest应该减去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中的项目,则左空格和右空格的长度将变为相同。

我在此处添加图片以使其清晰明了:

widthRequest

答案 1 :(得分:0)

我通过使用模板选择器并在集合末尾添加了几个空项目解决了这个问题。模板选择器为显示项目选择常规模板,为空项目选择带有空网格的模板。我通过包装可观察的集合并在视图模型集合中始终将N个项目显示为空值,在视图模型中创建了该集合。