使用 MAUI 在标签上垂直居中文本时出现问题-解网

问：

我正在使用以下代码来创建和呈现一个简单的 Label。布局设置为具有与屏幕相同的高度和宽度。

maincontent = new Microsoft.Maui.Controls.AbsoluteLayout
{
    BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
    HeightRequest = mainmescreenheight,
    IsEnabled = true,
    IsVisible = true,
    WidthRequest = mainmescreenwidth
};

Microsoft.Maui.Controls.Label newLabel = new Microsoft.Maui.Controls.Label
{
    BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
    FontAttributes = Microsoft.Maui.Controls.FontAttributes.Bold,
    FontFamily = "VerdanaBold",
    FontSize = 14,
    HorizontalOptions = Microsoft.Maui.Controls.LayoutOptions.Center,
    HorizontalTextAlignment = Microsoft.Maui.TextAlignment.Center,
    IsEnabled = true,
    IsVisible = true,
    MinimumHeightRequest = 300,
    MinimumWidthRequest = 640,
    Text = "Center of Label",
    TextColor = Microsoft.Maui.Graphics.Color.FromArgb("#FFFFFFFF"),
    VerticalTextAlignment = Microsoft.Maui.TextAlignment.Center,
    VerticalOptions = Microsoft.Maui.Controls.LayoutOptions.Center
};
AbsoluteLayout.SetLayoutFlags(newLabel, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.None);
AbsoluteLayout.SetLayoutBounds(newLabel, new Rect(0, 0, 640, 300));
maincontent.Children.Add(newLabel);

我希望文本，在本例中为“标签中心”，以垂直和水平居中显示。

尽管文本始终水平居中，但它始终显示在标签的最顶部，就像 VerticalTextAlignment 和 VerticalOptions 设置为一样。start 而不是 .中心。

如何使文本垂直居中？这是net7.0-windows10.0.19041.0。

标签 Maui 居中 absolutelayout

maincontent = new Microsoft.Maui.Controls.AbsoluteLayout
{
    BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
    HeightRequest = mainmescreenheight, 
    WidthRequest = mainmescreenwidth
};

Microsoft.Maui.Controls.Label newLabel = new Microsoft.Maui.Controls.Label
{
    BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
    FontAttributes = Microsoft.Maui.Controls.FontAttributes.Bold,
    FontFamily = "VerdanaBold",
    FontSize = 14,
    HorizontalOptions = Microsoft.Maui.Controls.LayoutOptions.Center,
    HorizontalTextAlignment = Microsoft.Maui.TextAlignment.Center,
    Text = "Center of Label",
    TextColor = Microsoft.Maui.Graphics.Color.FromArgb("#FFFFFFFF"),
    VerticalTextAlignment = Microsoft.Maui.TextAlignment.Center,
    VerticalOptions = Microsoft.Maui.Controls.LayoutOptions.Center
};
AbsoluteLayout.SetLayoutFlags(newLabel, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(newLabel, new Rect(0, 0, 1, 1));
maincontent.Children.Add(newLabel);

另外，我不知道你为什么有

HeightRequest = mainmescreenheight

或

宽度请求 = mainmescreenwidth

在 AbsoluteLayout 中。

默认情况下，AbsoluteLayout 适合其父级。

public MainPage()
{
    InitializeComponent();
    AbsoluteLayout maincontent = new Microsoft.Maui.Controls.AbsoluteLayout
    {
        BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
        IsEnabled = true,
        IsVisible = true,
    };

    Microsoft.Maui.Controls.Label newLabel = new Microsoft.Maui.Controls.Label
    {
        BackgroundColor = Microsoft.Maui.Graphics.Color.FromArgb("#FF221E1F"),
        FontAttributes = Microsoft.Maui.Controls.FontAttributes.Bold,
        FontFamily = "VerdanaBold",
        FontSize = 14,
        HorizontalOptions = Microsoft.Maui.Controls.LayoutOptions.Center,
        HorizontalTextAlignment = Microsoft.Maui.TextAlignment.Center,
        IsEnabled = true,
        IsVisible = true,
        Text = "Center of Label",
        TextColor = Microsoft.Maui.Graphics.Color.FromArgb("#FFFFFFFF"),
        VerticalTextAlignment = Microsoft.Maui.TextAlignment.Center,
        VerticalOptions = Microsoft.Maui.Controls.LayoutOptions.Center
    };
    AbsoluteLayout.SetLayoutFlags(newLabel, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional);
    AbsoluteLayout.SetLayoutBounds(newLabel, new Rect(0.5, 0.5, 640, 300));
    maincontent.Children.Add(newLabel);

    Content = maincontent;
}

这就是效果，这是你想要的吗？

原始答案

HorizontalOptions 和 VerticalOptions 属性对 AbsoluteLayout 的子级没有影响。

因此，如果要将标签垂直和水平居中，则应使用 AbsoluteLayoutFlags。请考虑以下代码：

        AbsoluteLayout.SetLayoutFlags(newLabel, Microsoft.Maui.Layouts.AbsoluteLayoutFlags.PositionProportional);
        AbsoluteLayout.SetLayoutBounds(newLabel, new Rect(0.5,0.5, 640, 300));

希望对您有所帮助！

我想做的是将文本垂直居中。通过试验，SetLayoutFlags 必须绝对为 None，并且矩形必须具有绝对坐标。此外，在上面的原始代码片段中，向 HorizontalOptions 或 VerticalOptions 分配任何内容是不必要的，不会更改任何内容，并且这些分配已被删除。这些只是我们试图让文本居中;它们会影响控件的位置，而不是其中的文本。看起来这是一个错误，将 VerticalTextAlignment 设置为 Center 毫无意义。

0赞 Liqun Shen-MSFT 10/19/2023

您是否尝试过像 FreakyAli 所说的那样删除 MinimumHeightRequest？

0赞 DumbestGuyOnSaturn 10/20/2023

是的。移除 MinimumHeightRequest 对 Label 控件中的文本居中没有影响。

0赞 Liqun Shen-MSFT 10/20/2023

我添加了一些代码和效果，这个效果是你想要的吗？

0赞 DumbestGuyOnSaturn 10/21/2023

谢谢你坚持这样做。效果正是我们所寻求的。但是，我们使用的是 AbsoluteLayoutFlags.None，因此我们可以绝对地将控件定位在屏幕上。我们希望在控件内垂直居中文本，而不管该控件在屏幕上的位置如何。

上一个：如何在Python中将图像读入单个像素值？

下一个：如何将 React 组件居中到窗口/不绑定到 <iFrame>

使用 MAUI 在标签上垂直居中文本时出现问题

Issue Centering Text Vertically on Labels Using MAUI

评论

评论

评论