Layout 以Xamarin的形式进行布局的正确方式？

我想知道如何正确地布置一些项目 在我的Xamarin.Forms项目的页面上

我需要创建一个登录页面，图形布局应如下所示：

我猜我应该使用

Grid

，但我真的很难弄清楚如何使用它

如何创建呈现的布局

注意：

这个问题与我想要的布局无关。我想要的布局 然而，我会给我一个真实世界的样本来学习如何正确地做 Xamarin.Forms中的布局

---

我想先试试StackLayout

<StackLayout>
  <Label />
  <Image />
  <Entry />
  <Entry />
  <StackLayout Orientation="Horizontal">
    <Button />
    <StackLayout>
      <Button />
      <Button />
    </StackLayout>
  </StackLayout>
  <Button />
  <Button />
</StackLayout>

以下是解决方案

public partial class ComplexRelativeLayoutPage : ContentPage
{
    public ComplexRelativeLayoutPage()
    {
        InitializeComponent();

        RelativeLayout layout = new RelativeLayout();

        Label topLabel = new Label
        {
            Text = "I am a label",
        };
        layout.Children.Add(topLabel,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - topLabel.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),
            Constraint.Constant(10)
            );


        Image blueImage = new Image
        {
            Source= ImageSource.FromResource("ButtonRendererDemo.Resources.test.jpg")
        };
        layout.Children.Add(blueImage,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - 300 / 2;
            }),
            Constraint.RelativeToView(topLabel, (parent, label) =>
            {
                 return label.Bounds.Bottom + 20;
            }),
            Constraint.Constant(300),
            Constraint.Constant(250)
        );

        Entry e1 = new Entry
        {
            Placeholder="Input Box 1",
        };
        layout.Children.Add(e1,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.X + 10; 
            }),
            Constraint.RelativeToView(blueImage, (parent, img) =>
            {
                return img.Bounds.Bottom + 20;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 20;
            })
        );

        Entry e2 = new Entry
        {
            Placeholder = "Input Box 2",
        };
        layout.Children.Add(e2,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.X + 10;
            }),
            Constraint.RelativeToView(e1, (parent, e) =>
            {
                return e.Bounds.Bottom;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 20;
            })
        );

        Button bLeft = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Pink
        };
        layout.Children.Add(bLeft,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.X + 20;
            }),
            Constraint.RelativeToView(e2, (parent, e) =>
            {
                return e.Bounds.Bottom;
            })
        );

        Button bRight1 = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Pink
        };
        layout.Children.Add(bRight1,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - bRight1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width - 20;
            }),
            Constraint.RelativeToView(bLeft, (parent, b) =>
            {
                return b.Y;
            })
        );

        Button bRight2 = new Button
        {
            Text = "Button",
            BackgroundColor=Color.Pink
        };
        layout.Children.Add(bRight2,
            Constraint.RelativeToView(bRight1, (parent, b) =>
            {
                return b.X;
            }),
            Constraint.RelativeToView(bRight1, (parent, b) =>
            {
                return b.Bounds.Bottom + 10;
            })
        );

        Button bBottom1 = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Lime
        };
        layout.Children.Add(bBottom1,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - bBottom1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),               
            Constraint.RelativeToView(bRight2, (parent, b) =>
            {
                return b.Bounds.Bottom + 20;
            })
        );

        Button bBottom2 = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Lime
        };
        layout.Children.Add(bBottom2,
            Constraint.RelativeToView(bBottom1, (parent, b) =>
            {
                return b.X;
            }),
            Constraint.RelativeToView(bBottom1, (parent, b) =>
            {
                return b.Bounds.Bottom + 10;
            })
        );

        ScrollView v = new ScrollView
        {
            Content=layout
        };

        Content = v;
    }
}

---

我还是会考虑的。gridlayout@YuriS但是我如何使用它呢？文档非常混乱。@YuriS根据我在网上读到的内容，代码是首选的，因为xaml似乎不直观。再想一想，我认为相对布局会很好。如果您想要更多的控制，可以使用AbsoluteLayout。答案很快就来了，你是一个了不起的人。通常人们会称之为“填鸭式喂食”，我想称之为帮助之手。现在我在Xamarin学到了至少五个新东西，我今天才开始。谢谢