如何在 StackLayout 中水平居中 FlexLayout？

Question

我在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,0,10,0" />
        <Label Text="L:37°" />
    </FlexLayout>

</StackLayout>

如何在FlexLayout中將StackLayout ？

Answer 1

我建議在水平方向使用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>

Answer 2

將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>

請注意，我將第一個 label 上的邊距拆分為兩個標簽之間的填充，以便它們在FlexLayout內居中。