如何在 StackLayout 中将 FlexLayout 水平居中？答案

【问题标题】：How do I horizontally center a FlexLayout inside a StackLayout?如何在 StackLayout 中将 FlexLayout 水平居中？
【发布时间】：2021-01-08 23:21:35
【问题描述】：

我在StackLayout 中有一个FlexLayout：

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

如何在StackLayout 中居中FlexLayout？

【问题讨论】：

HorizontalOptions="Center"
@Jason 我在哪里应用该属性？
@Jason 我将该属性应用于FlexLayout 标签。但它并没有解决问题。

标签： xaml xamarin xamarin.forms

【解决方案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>

【讨论】：

【解决方案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>

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

【讨论】：