Question

我正在使用Xamarin跨平台，我的主要目标平台是UWP和辅助iOS。我正在尝试在ListView中使用FlexLayout，其中可能包含长标签文本，我想将它们包装在已定义的FlexLayout基础中。

这是我到目前为止编写的代码：为简单起见，我使用静态数据，实际数据将动态绑定。

<ListView.ItemTemplate>
   <FlexLayout Direction="Row" Wrap="Wrap" Margin="0,10,0,10">
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="1. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="2. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="3.A long Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="4.A very loooooong Label header with long value"/>
                        <Label Text="A long Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="5. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="6. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="7. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="8. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="9. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                    <StackLayout Orientation="Horizontal" FlexLayout.Basis="300">
                        <Label Text="10. Label header"/>
                        <Label Text="Label Value"></Label>
                    </StackLayout>
                </FlexLayout>

            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

这将产生以下输出： Sample output

我们可以看到第四堆栈的数据（4.一个很长的具有长值的标签头）被截断了。

但是我希望我的输出是这样的：Desired Output

这里要记住的是：

我想最大限度地利用空间。
我不喜欢使用自动换行。
数据可以是任何长度，我无法定义其最小或最大长度。
数据是动态的，将在运行时绑定，在这里为简单起见使用静态数据。
要使每一行中每个堆栈的宽度相等，高度必须根据数据要求进行更改。

Answer 1

我想充分利用空间。

据我了解，您正在利用可用的最大空间。

我不喜欢使用Wrap Layout。

从来没有听说过xamarin形式的换行布局，但是在这里，如果您不想使用LineBreakMode，那是达到要求的唯一途径。

数据可以是任何长度，我无法定义其最小或最大长度。

那没关系，问题不是Flex布局，而是设置标签LineBreakMode属性的标签可以解决问题

如果您觉得文本太长，请添加以下内容：

  <Label ..... LineBreakMode="WordWrap"/>

数据是动态的，将在运行时绑定，在这里为简单起见使用静态数据。

在您的XAML编写正确之前，它不会发生任何变化

要使每一行中每个堆栈的宽度相等，高度必须根据数据要求进行更改。

在这种情况下，我建议您将StackLayout包裹在Grid而不是FlexLayout中，然后将RowDefinitions设置为Auto，以便根据需要适合自己

如何在FlexLayout中包装Label

1 个答案: