如何在MAUI中基于基线而非包围框对齐Label控件

方案1：使用单个Label+FormattedText（推荐） #

同一个Label内的不同Span会自动基于基线对齐，这是最简洁且适配性最强的方式，无需额外计算或调整，天然支持跨平台和字体缩放。

XAML代码示例：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LiveTulaMobile.Pages.TestPage"
             Title="TestPage">
    <HorizontalStackLayout Background="Yellow">
        <Label Background="Red">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="1,000" FontSize="48" />
                    <Span Text="kg" FontSize="24" />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </HorizontalStackLayout>
</ContentPage>

方案2：独立Label动态计算基线偏移（需代码支持） #

如果必须使用两个独立的Label（例如需要不同的交互逻辑或样式），可以通过字体度量信息动态计算偏移量，保证基线对齐：

步骤1：修改XAML，给Label命名并设置基础布局 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LiveTulaMobile.Pages.TestPage"
             Title="TestPage">
    <HorizontalStackLayout x:Name="RootStack" Background="Yellow">
        <Label x:Name="LargeLabel" FontSize="48" Text="1,000" Background="Red" VerticalOptions="Start"/>
        <Label x:Name="SmallLabel" FontSize="24" Text="kg" Background="Pink" VerticalOptions="Start"/>
    </HorizontalStackLayout>
</ContentPage>

步骤2：后台代码计算并调整偏移 #

在页面的OnAppearing方法中添加计算逻辑，同时监听布局变化以适配字体缩放：

protected override void OnAppearing()
{
    base.OnAppearing();
    AlignLabelBaselines();
    RootStack.SizeChanged += (s, e) => AlignLabelBaselines();
}

private void AlignLabelBaselines()
{
    if (LargeLabel.Font == null || SmallLabel.Font == null) return;

    // 获取字体度量信息，获取基线到字体下行底部的比例
    var largeFontMetrics = LargeLabel.Font.GetFontMetrics();
    var smallFontMetrics = SmallLabel.Font.GetFontMetrics();

    // 计算实际像素值（FontSize为设备无关单位，需转成实际像素）
    var largeDescent = largeFontMetrics.Descent * LargeLabel.FontSize;
    var smallDescent = smallFontMetrics.Descent * SmallLabel.FontSize;

    // 计算偏移量，让两个Label的基线处于同一水平
    var baselineOffset = (LargeLabel.Height - largeDescent) - (SmallLabel.Height - smallDescent);
    SmallLabel.TranslationY = baselineOffset;
}

原方法失效的原因 #

VerticalOptions="End"和VerticalTextAlignment="End"是让Label的文本对齐控件底部，但不同字号的字体，其基线到控件底部的距离（Descent）占字号的比例不同，因此控件底部对齐时，基线自然无法对齐。

内容的提问来源于stack exchange，提问作者Victor Chelaru