XAML MAUI混合标签(文本)和图像-图像像文本一样对齐

gc0ot86w  于 2023-05-21  发布在  其他
关注(0)|答案(2)|浏览(228)

我试图在MAUI中混合文本和图像。
在HTML中,你可以像
Hello World! <img src="dotnet_bot.png"> Not working world
然后它会自动对齐。我希望在MAUI中使用标签和图像做同样的事情。如果你缩小宽度,它会自动转到下一行。

<Label Text="Hello, World!" />
<Image Source="dotnet_bot.png" HeightRequest="50" />
<Label Text="Not working world" />

我想我需要使用一些布局来做到这一点,但目前卡住了。我尝试了几个布局,但没有工作。
尝试一些布局和第一个标签去下一行与最后一个标签以及。尝试了这个和那个,但在这一点上没有成功。有办法吗?
(尝试了WebView,但在我的情况下似乎没有那么有用)
感谢您的帮助!

4c8rllxm

4c8rllxm1#

如果你的意思是把它们(标签和图像)放在一行中,你可以使用HorizontalStackLayout

<VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">
            <HorizontalStackLayout>
                <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="10"
                HorizontalOptions="Center" />
            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="100"
                HorizontalOptions="Center" />

           <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="10"
                HorizontalOptions="Center" />
            </HorizontalStackLayout>
</VerticalStackLayout>

它将是:


yjghlzjz

yjghlzjz2#

正如Steve所暗示的,你应该使用FlexLayout,因为FlexLayout是一个可以在堆栈中水平和垂直排列其子节点的布局,如果子节点太多而无法放入一行或一列,也可以** Package **其子节点。此外,FlexLayout还可以控制方向和对齐方式,并适应不同的屏幕尺寸。
您需要像下面这样设置Wrap="Wrap",这表明如果需要,项目将被放置在多行中。
下面是示例代码供您参考:

<FlexLayout Wrap="Wrap">

       <Label Text="Hello, World!" 
               FontSize="50"/>
        
       <Image Source="dotnet_bot.png"
               HeightRequest="200"/>

       <Label Text="Not working world"
               FontSize="50"/>

</FlexLayout>

输出:

相关问题