Xamarin Forms 将不同字体大小的标签垂直对齐到同一基线

Posted 2023-03-13

【中文标题】Xamarin Forms 将不同字体大小的标签垂直对齐到同一基线

【英文标题】：Xamarin Forms vertically align labels of different font sizes to the same baseline

【发布时间】：2019-11-18 12:47:17

【问题描述】：

我在水平方向的堆栈布局中有两个并排的标签。标签有不同的字体大小。无论字体大小如何，我都想让每​​个标签文本的基线（底部边缘）相同。但是，xamarin 表单的默认行为不是这样做的。以下代码

    <StackLayout Orientation="Horizontal" >
            <Label  FontSize="12" Text="A Noble Spirit"></Label>
            <Label  FontSize="18" Text="Embiggens The Smallest Man"></Label>
    </StackLayout>

在 android 上运行以下视图。

我尝试了许多不同的组合来设置垂直文本对齐和标签上的垂直选项属性。我能想到的最好的（以及我认为应该起作用的）是添加垂直选项=结束它们。这稍微改善了一些情况，但仍然存在不匹配，因此较大标签的文本（embiggens）开始高于较小标签 - 如下所示：

    <StackLayout Orientation="Horizontal" >
            <Label VerticalOptions="End" FontSize="12" Text="A Noble Spirit"></Label>
            <Label VerticalOptions="End" FontSize="18" Text="Embiggens The Smallest Man"></Label>
    </StackLayout>

如您所见，有些改进，但仍不一致。这让我有点上墙了。我开始认为这可能是 Xamarin Forms for android 中的一个错误。 （我会在稍后获得一个在 ios 上运行的示例以查看它是否特定于 android 时添加到这个问题。

我可以通过在较小的标签上添加上边距来破解它，这等于字体大小的差异，这是很严重的，我不想在我的系统中引入技术债务和维护。但这里是为了展示它。希望不必诉诸于此...

    <StackLayout Orientation="Horizontal" >
            <Label FontSize="12" Margin="0,6,0,0" Text="A Noble Spirit"></Label>
            <Label FontSize="18" Text="Embiggens The Smallest Man"></Label>
    </StackLayout>

【参考方案1】：

原因：如果你设置了两个label的背景色，你可以看到，因为label有一个默认的“Padding”。该值取决于它的高度。

解决方案：

您可以将两个不同的字符串放在同一个标​​签中。它有一个名为 FormattedText 的属性，它允许您为 Label 设置格式化文本。

<StackLayout Orientation="Horizontal"  VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <Label FormattedText="Binding FormattedTextContent" x:Name="label" ></Label>
        <Label FormattedText="Binding FormattedTextContent" x:Name="label2" ></Label>
</StackLayout>

在代码后面

FormattedTextContent = new FormattedString();
var fs = new FormattedString();
fs.Spans.Add(new Span  Text = "A Noble Spirit " , FontSize = 12, TextColor = Color.Black );
fs.Spans.Add(new Span  Text = "  ", FontSize = 18 );
label.FormattedText = fs;

var fs1 = new FormattedString();

fs.Spans.Add(new Span  Text = "  ", FontSize = 12 );
fs.Spans.Add(new Span  Text = "Embiggens The Smallest Man", TextColor = Color.Black, FontSize = 18 );
label2.FormattedText = fs1;

当然你可以使用 MVVM，因为它是一个可绑定的属性。

【讨论】：

感谢您的出色回答。当两个格式化的字符串在一个句子中时，我可以让它像这样工作。但是对于我的用例，我需要单独放置字符串 - 一个中心对齐在视图的中心，一个右对齐在同一个视图中。鉴于我不能在单个跨度上使用水平选项，有没有办法使用格式化文本方法来做到这一点？

检查我的更新答案，它使用两个不同的标签，以便您可以设置位置。

很好，所以基本上我们添加了一个带有单个空格的空白跨度，其字体大小与另一个跨度的字体大小相同，这迫使行的高度相同。它工作得很好，而且似乎比保证金解决方案少了点hacky。我仍然认为可以在表单中选择此选项，但如果没有，我将使用此选项。干杯！

卢卡斯，知道如何实现这一点以将标签文本对齐在其中心吗？这个技巧似乎只适用于基线。