Xamarin相对布局约束类RelativeToParent意外输出？

Question

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Diagnostics;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App1
{
    public partial class MainPage : ContentPage
    {

        public MainPage()
        {
            RelativeLayout relativeLayout = new RelativeLayout();

            Label upperLeft = new Label
            {
                Text = "Upper Left",
                FontSize = 20
            };
            relativeLayout.Children.Add( upperLeft ,
                Constraint.Constant(0), Constraint.Constant(0)
                );
            Label constantLabel = new Label
            {
                Text = "Constants are Absolute",
                FontSize = 20
            };
            relativeLayout.Children.Add(constantLabel,
                Constraint.Constant(100),
                Constraint.Constant(100),
                Constraint.Constant(50),
                Constraint.Constant(200)
                );
            Label halfWayDown = new Label
            {
                Text = "Halfway down and across",
                FontSize = 20
            };
            relativeLayout.Children.Add(halfWayDown,
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Width / 2;
                  }),
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Height / 2;
                  })
                  ) ;
            this.Content = relativeLayout;
        }

        
    }
}

我有 3 个标签，一个放在左上角，第二个放在随机的 location(100,100) 上，第三个放在父宽度和高度的一半处。我对最后一个标签有疑问。我不知道为什么最后一个标签的文本会穿过屏幕，为什么它没有换行。此外，当我传递最后一个标签的width 和height 的值时，标签的文本会更改行，为什么会发生这种情况？当我只将两个参数传递给第三个标签时，就会发生这种行为（文本穿过屏幕）。我还尝试了第一个标签 where ，当我只将两个参数传递给 Add-method 时，文本会自动更改其行。谁能告诉我RelativeToParent 的方法是如何工作的？如果我没有通过它们，默认的 width 和 height 值是多少？为什么最后一个标签中的文本不改变行？ Link for the image of the output i am getting

Answer 1

你没有设置halfWayDown标签的宽度，所以文本默认显示在一行，下面的部分被截断。

标签halfWayDown添加到Children时可以设置宽度：

        relativeLayout.Children.Add(halfWayDown,
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Width / 2;
              }),
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Height / 2;
              }),

               // set the 1/3 width  of parent
               Constraint.RelativeToParent((parent) =>
               {
                 return parent.Width * 0.5;
               })
              );

您还可以为您的标签设置MaxLines,LineBreakMode。

请参考以下代码：

    public MainPage()
    {

        RelativeLayout relativeLayout = new RelativeLayout();

        Label upperLeft = new Label
        {
            Text = "Upper Left",
            FontSize = 20
        };
        relativeLayout.Children.Add(upperLeft,
            Constraint.Constant(0), Constraint.Constant(0)
            );
        Label constantLabel = new Label
        {
            Text = "Constants are Absolute",
            FontSize = 20
        };
        relativeLayout.Children.Add(constantLabel,
            Constraint.Constant(100),
            Constraint.Constant(100),
            Constraint.Constant(50),
            Constraint.Constant(200)
            );
        Label halfWayDown = new Label
        {
            Text = "Halfway down and across",
            FontSize = 20,
            BackgroundColor= Color.Yellow,
            MaxLines = 2,
            LineBreakMode = LineBreakMode.WordWrap,
        };
        relativeLayout.Children.Add(halfWayDown,
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Width / 2;
              }),
              Constraint.RelativeToParent((parent) =>
              {
                  return parent.Height / 2;
              }),

               // set the 1/3 width  of parent
               Constraint.RelativeToParent((parent) =>
               {
                 return parent.Width * 0.5;
               })
              );
        this.Content = relativeLayout;
    }

更新：

但第一个标签 (upperLeft) 改变了它的行，即使我没有 传递宽度值它会自动改变线条吗？

最后一个标签(halfWayDown)也可以换行，但是字符串还没有达到实际宽度。

作为测试，可以用长字符串来验证，测试代码为：

Label halfWayDown = new Label
            {
                Text = "Halfway down and across 01234567890123456789012345678901234567890123456789012345678901234567890123456789",
                FontSize = 20,
                BackgroundColor = Color.Yellow,
                //LineBreakMode= LineBreakMode.CharacterWrap,
                //WidthRequest=200,
            };
            relativeLayout.Children.Add(halfWayDown,
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Width / 2;
                  }),
                  Constraint.RelativeToParent((parent) =>
                  {
                      return parent.Height / 2;
                  })

                   // set the 1/3 width  of parent
                   //Constraint.RelativeToParent((parent) =>
                   //{
                   //  return parent.Width * 0.5;
                   //})
                  );

结果是：

注意：

为了避免这种情况，您可以设置标签的宽度 (halfWayDown )。

更新2：

你可以看到halfWayDown标签的字符串有一些缺失 人物。缺少“ss 012345”部分。

这是因为upperLeft 和halfWayDown 这两个标签都有默认宽度。
您可以通过添加按钮来验证这一点，请参考以下代码：

        Button button = new Button { 
         Text="test",
         HorizontalOptions= LayoutOptions.StartAndExpand

        };

        button.Clicked += delegate {
            double width1 = upperLeft.Width;
            double width2 = halfWayDown.Width;
            System.Diagnostics.Debug.WriteLine("----> upperLeft's width = " + width1 + "<---> halfWayDown.Width = " + width2);
        };
        relativeLayout.Children.Add(button,
             Constraint.RelativeToParent((parent) =>
             {
                 return parent.Width / 3;
             }),
             Constraint.RelativeToParent((parent) =>
             {
                 return parent.Height*2 / 3;
             })

             );

我的设备上的输出如下：

----> upperLeft's width = 375.652173913043<---> halfWayDown.Width = 375.652173913043

因此，为避免这种情况，您可以为标签设置宽度 (halfWayDown)。