我如何均匀地分布4个控件在Xamarin窗体水平StackLayout

Question

如何在Xamarin Forms水平StackLayout中均匀分布4个控件?它在iPhone 4S上看起来还不错，但在iPhone 6或iPad上却很糟糕。水平堆栈布局是ListView中的列表项。我尝试了一个相对布局和1行网格。但是我的(在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);

Answer 1

使用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
});