Xamarin.Forms如何实现多个Button按钮在同一行显示

问题原因 #

StackLayout默认是垂直排列布局，你直接把两个按钮添加到主容器MainStackLayout中，必然会上下分行显示。

解决方法 #

每次点击生成按钮时，先创建一个水平方向的布局容器，把两个需要同行的按钮放到这个容器里，再把容器添加到主布局即可。

修改后C#代码 #

namespace RowCounter.Forms
{
    public partial class MainPage : ContentPage
    {
        public int Number = 1;

        public MainPage()
        {
            InitializeComponent();
        }
        void OnButtonClicked(object sender, EventArgs e)
        {
            // 创建水平布局容器，承载同行的两个按钮
            StackLayout rowContainer = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                Spacing = 8 // 按钮间距可自行调整
            };

            Button projectBtn = new Button
            {
                Text = "NAME PRODJECT" + "  " + Number,
                TextColor = Color.Red,
                WidthRequest = 450,
                HorizontalOptions = LayoutOptions.Start
            };
            Button closeBtn = new Button
            {
                Text = "X",
                WidthRequest = 40,
                HorizontalOptions = LayoutOptions.End
            };

            // 按钮先加进水平容器，再把容器加进主布局
            rowContainer.Children.Add(projectBtn);
            rowContainer.Children.Add(closeBtn);
            MainStackLayout.Children.Add(rowContainer);
            Number++;
        }               
    }
}

可选优化 #

如果需要适配不同尺寸的屏幕，可以去掉projectBtn的固定宽度WidthRequest = 450，将它的HorizontalOptions改为LayoutOptions.FillAndExpand，按钮会自动占满除关闭按钮外的剩余宽度，适配性更强。
原有XAML代码无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者Ven Saman