时间戳

首页 > 解决方案 > 如何在 FlexLayout 中包装标签

xaml - 如何在 FlexLayout 中包装标签

问题描述

我正在使用 Xamarin Cross-platform，我的主要目标平台是 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>

这将产生以下输出： 示例输出

我们可以看到第四个堆栈的数据（4.A very loooooong Label header with long value）被截断。

但我希望我的输出是这样的：期望的输出

这里要记住的是：

  1. 我想最大限度地利用空间。
  2. 我不喜欢使用 Wrap Layout。
  3. 数据可以是任何长度，我无法定义它的最小或最大长度。
  4. 数据是动态的，将在运行时绑定，这里使用静态数据只是为了简单起见。
  5. 想要每一行中每个栈的宽度相等，高度必须根据数据要求而变化。

标签： xamlxamarinxamarin.forms

解决方案

我想最大限度地利用空间。

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

我不喜欢使用 Wrap Layout。

从未听说过 xamarin 表单中的换行布局，但如果您的意思是不想使用 LineBreakMode，那么这是实现您的要求的唯一方法。

数据可以是任意长度，我无法定义它的最小或最大长度。

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

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

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

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

除非您的 XAML 编写得很好，否则不会有任何改变，它不会表现得很奇怪

想要每一行中每个栈的宽度相等，高度必须根据数据要求而变化。

在这种情况下，我建议您将StackLayout内部 aGrid而不是 a包装起来FlexLayout，然后将 RowDefinitions 设置为 Auto，以便它们根据需要适合自己。

推荐阅读