如何在 Xamarin Forms 水平 StackLayout 中均匀分布 4 个控件

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

如何在 Xamarin Forms 水平 StackLayout 中均匀分布 4 个控件

How do I evenly distribute 4 controls within a Xamarin Forms horizontal StackLayout

xamarin.forms