.NET MAUI Xaml：Flex 布局与图像和文本不一致

Question

最近我对 xaml 感到非常沮丧，因为在 Flex 布局如何包装方面我无法获得形式上的一致性。我还没有找到另一个包含内容的选项，因为我需要小型文本大小的图像和普通文本，并且我需要换行。这些文字不会到达页面末尾，并且当我调整图像大小时，图像会跳转到看似随机的位置。我所做的一切都无法解决这个问题。

这里没有换行，它选择在图像后自行换行：

这是在我调整窗口大小之后，硬币不再位于 + 之后，而另一个硬币决定走自己的线：

我做错了什么吗？是否有一些我不知道的组件或选项可以神奇地解决我的问题？

这是代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ProjectName.MainPage">
    
    <ScrollView>
        <Grid RowDefinitions="*,Auto">
            <VerticalStackLayout
                Spacing="25"
                Padding="30,0"
                VerticalOptions="StartAndExpand"
                Grid.Row="0">
                <FlexLayout Wrap="Wrap" AlignItems="Start" Direction="Row" JustifyContent="Start" >
                    <Label Text="Lorem ipsum dolor sit amet, mazim liber delenit nec in, habeo veritus inciderint ex mel&#160;+" FontSize="16"/>
                    <Image Source="coin.png" WidthRequest="16" HeightRequest="16" TranslationY="3"/>
                    <Label FontSize="16" Text="&#160;No facilis qualisque per, dolor omnes nec at, sanctus delectus omittantur mel eu. Possit commodo aliquando nam ea, nostro deserunt id qui, paulo regione inciderint nec te."/>
                    <Image Source="coin.png" WidthRequest="16" HeightRequest="16" TranslationY="3"/>
                </FlexLayout>
            </VerticalStackLayout>
        </Grid>
    </ScrollView>
</ContentPage>

Answer 1

问题是您似乎期望 Label 跨越 FlexLayout 的行，但这实际上是不可能的，因为 Label 始终是矩形。

因此，发生的情况是这样的： Label 占用了尽可能多的空间，但最终文本不再适合，因此它添加了换行符并且不使用完整宽度。行中的剩余空间足够大，足以让 FlexLayout 容纳 Image，这就是您出现此行为的原因。

注意：在第一张图片中，布局有两行，在第二张图片中，布局有三行。

为此，（某种程度上） 工作，每个单词都需要自己的标签。