Как обернуть ярлык в FlexLayout

Question

Я работаю с кроссплатформенным Xamarin, моей основной целевой платформой является UWP и вторичная iOS. Я пытаюсь использовать FlexLayout в ListView, который может содержать длинные текстовые метки, которые я хочу заключить в определенную основу 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>

Это дает следующий вывод: Пример вывода

Мы видим, что данные четвертого стека (очень длинный заголовок Label с длинным значением 4.) усекаются.

Но я хочу, чтобы мой вывод был примерно таким: Желаемый вывод

Вот что нужно запомнить:

1. Я хочу максимально использовать пространство.
2. Я не предпочитаю использовать Wrap Layout.
3. Данные могут быть любой длины, и я не могу определить их минимальную или максимальную длину.
4. Данные являются динамическими, которые будут связаны во время выполнения, здесь для простоты используются статические данные.
5. Если вы хотите, чтобы в каждом ряду была одинаковая ширина, высота должна меняться в соответствии с требованиями к данным.

Answer 1

Я хочу максимально использовать пространство.

В моем понимании вы используете максимально доступное пространство.

Я не предпочитаю использовать Wrap Layout.

Никогда не слышал о макете переноса в формах xamarin, но здесь, если вы имеете в виду, что вы не хотите использовать LineBreakMode, то это единственный возможный способ для достижения ваших требований.

Данные могут быть любой длины, и я не могу определить их минимальную или максимальную длину.

Это не имеет большого значения, проблема не в гибкой компоновке, а в метке, устанавливающей свойство LineBreakMode для меток.

Где бы вы ни чувствовали, что текст будет слишком длинным, добавьте что-то вроде этого:

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

Данные являются динамическими, которые будут связаны во время выполнения, здесь для простоты используются статические данные.

Это ничего не меняет, пока ваш XAML не будет хорошо написан, он не будет вести себя странно

Если вы хотите, чтобы в каждом ряду была одинаковая ширина, высота должна меняться в соответствии с требованиями к данным.

В этом случае я бы посоветовал вам обернуть StackLayout внутри Grid, а не FlexLayout, а затем задать для RowDefinitions значение Auto, чтобы они подходили друг другу в соответствии с необходимостью.