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

Question

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

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

运行在 android 上的以下视图中的结果。

我已经尝试了许多不同的组合来设置标签上的垂直文本对齐方式和垂直选项属性。我能想到的最好的办法（我认为应该可行的办法）是为它们都添加 vertical options = end 。这改善了一点，但仍然存在不匹配，因此较大标签的文本 (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>

如您所见，有所改进，但仍未对齐。这让我有点不知所措。我开始认为这可能是 android 的 Xamarin Forms 中的错误。（稍后我可以在 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>

Answer 1

原因： 如果你设置两个标签的背景颜色，你可以看到因为标签有一个默认值"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，因为它是可绑定的属性。

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

Xamarin Forms vertically align labels of different font sizes to the same baseline

vertical-alignment

xamarin.android

xamarin

xamarin.forms