如何在 StackLayout 内水平居中 FlexLayout？

问题描述

我在 FlexLayout 中有一个 StackLayout：

<StackLayout HorizontalOptions="Center" Padding="0,100">
    <Label
        Text="Franklin"
        HorizontalTextAlignment="Center"
        FontSize="Large" />
    <Label Text="Mostly Cloudy" HorizontalTextAlignment="Center" />
    <Label
        Text="55°"
        HorizontalTextAlignment="Center"
        FontSize="Header" />

    <!-- PLEASE CENTER ME -->
    <FlexLayout>
        <Label Text="H:55°" Margin="0,10,0" />
        <Label Text="L:37°" />
    </FlexLayout>

</StackLayout>

如何将 FlexLayout 置于 StackLayout 中？

解决方法

我建议在水平方向使用 StackLayout。 StackLayout 提供了在页面中放置元素的更自然的流程。

<!-- This part is now centered -->
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
    <Label Text="H:55°" Padding="5,0" />
    <Label Text="L:37°" Padding="5,0" />
</StackLayout>

,

将 FlexLayout 包裹在 AbsoluteLayout 中：

<!-- This part is now centered -->
<AbsoluteLayout HorizontalOptions="CenterAndExpand">
    <FlexLayout>
        <Label Text="H:55°" Padding="5,0" />
        <Label Text="L:37°" Padding="5,0" />
    </FlexLayout>
</AbsoluteLayout>

请注意，我将第一个标签上的边距拆分为两个标签之间的填充，以便它们在 FlexLayout 内居中。