Xamarin.forms 如何在Xamarin Forms水平堆栈布局中均匀分布4个控件

如何在Xamarin Forms水平堆栈布局中均匀分布4个控件。在iPhone4S上看起来不错，但在iPhone6或iPad上却很糟糕。水平堆栈布局是ListView中的列表项。我尝试了相对布局和一行网格。但是我的车看起来最好（在4S上）。谢谢

我有一个按钮，标签，标签，还有一个按钮，按顺序排列

        stackLayout = new StackLayout {
            Orientation = StackOrientation.Horizontal,
            HorizontalOptions = LayoutOptions.Center
        };
        deleteButton.Image = "minus.png";
        deleteButton.HorizontalOptions = LayoutOptions.Start;

        //label text width may vary from 4 to 16 characters
        displayLabel.SetBinding(Label.TextProperty, "Text");
        displayLabel.HorizontalOptions = LayoutOptions.Center;
        displayLabel.WidthRequest = 125;

        //label text is always 8 characters
        displayLabel2.SetBinding(Label.TextProperty, "Text2");
        displayLabel2.HorizontalOptions = LayoutOptions.Center;

        button2.Image = "plus.png";
        button2.HorizontalOptions = LayoutOptions.EndAndExpand;

        stackLayout.Children.Add(deleteButton);
        stackLayout.Children.Add(displayLabel);
        stackLayout.Children.Add(displayLabel2);
        stackLayout.Children.Add(button2);

---

使用StackLayout:

using Xamarin.Forms;

var label1 = new Label() {
    Text = "label1",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var label2 = new Label() {
    Text = "label2",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var label3 = new Label() {
    Text = "label3",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var label4 = new Label() {
    Text = "label4",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var stackLayout = new StackLayout 
{
    Orientation = StackOrientation.Horizontal,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Children = {
        label1,
        label2,
        label3,
        label4,
    }
};

RootPage.Children.Add(new ContentPage {
    Padding = 10,
    Content = stackLayout
});

using Xamarin.Forms;

    var label1 = new Label() {
    Text = "label1",
};

var label2 = new Label() {
    Text = "label2",
};

var label3 = new Label() {
    Text = "label3",
};

var label4 = new Label() {
    Text = "label4",
};

var gridLayout = new Grid 
{
    HorizontalOptions = LayoutOptions.FillAndExpand,
    ColumnDefinitions = new ColumnDefinitionCollection() {
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
    },
    RowDefinitions = new RowDefinitionCollection() {
        new RowDefinition() { Height = GridLength.Auto }
    }
};

gridLayout.Children.Add(label1, 0, 0);
gridLayout.Children.Add(label2, 1, 0);
gridLayout.Children.Add(label3, 2, 0);
gridLayout.Children.Add(label4, 3, 0);

RootPage.Children.Add(new ContentPage {
    Padding = 10,
    Content = gridLayout
});

使用网格：

using Xamarin.Forms;

var label1 = new Label() {
    Text = "label1",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var label2 = new Label() {
    Text = "label2",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var label3 = new Label() {
    Text = "label3",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var label4 = new Label() {
    Text = "label4",
    HorizontalOptions = LayoutOptions.FillAndExpand, //OR CenterAndExpand
};

var stackLayout = new StackLayout 
{
    Orientation = StackOrientation.Horizontal,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Children = {
        label1,
        label2,
        label3,
        label4,
    }
};

RootPage.Children.Add(new ContentPage {
    Padding = 10,
    Content = stackLayout
});

using Xamarin.Forms;

    var label1 = new Label() {
    Text = "label1",
};

var label2 = new Label() {
    Text = "label2",
};

var label3 = new Label() {
    Text = "label3",
};

var label4 = new Label() {
    Text = "label4",
};

var gridLayout = new Grid 
{
    HorizontalOptions = LayoutOptions.FillAndExpand,
    ColumnDefinitions = new ColumnDefinitionCollection() {
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
        new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
    },
    RowDefinitions = new RowDefinitionCollection() {
        new RowDefinition() { Height = GridLength.Auto }
    }
};

gridLayout.Children.Add(label1, 0, 0);
gridLayout.Children.Add(label2, 1, 0);
gridLayout.Children.Add(label3, 2, 0);
gridLayout.Children.Add(label4, 3, 0);

RootPage.Children.Add(new ContentPage {
    Padding = 10,
    Content = gridLayout
});

---

只是一个问题：这绝对需要是一个堆栈布局吗？如果没有，那么你可以考虑一个可以很容易处理的网格。我尝试了一个1行的网格，有4列，但是由于某种原因，这4个项目没有对齐。谢谢丹尼尔。FillAndExpand是使用堆栈布局的关键。我确实必须给我的第二个项目一个宽度请求（因为它的宽度不同），以保持所有四列从一行到另一行对齐。我将很快试用您的CenterAndExpand版本和网格实现。没问题。您可以在这里阅读更多关于布局选项的信息：快速跟进问题。第一个项目是动态的，因为它只在有时显示，当它不显示有效的第一个项目（label2）似乎被固定在行的最左端时，我如何在label2的左侧添加一些填充或空间？我不知道我是否理解正确，但如果您想在

标签不可见时甚至留下空间，您可以将
Label
替换为
ContentView
，并将
Content
设置为您的
Label
。然后只需将
标签的
可见性设置为
true
或
false
。这样，当标签不可见时，均匀间距不会受到影响。谢谢，我会试试看。