如何在填充屏幕的 iPhone 上实现四个间隔按钮，并且在比填充一半屏幕的 iPhone 上更大？

Question

我想要四个这样的按钮：

<Grid x:Name="buttonGrid" Grid.Row="3" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" Padding="20, 0">
    <Button x:Name="zeroButton" Text="0" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
    <Button x:Name="oneButton" Text="1" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
    <Button x:Name="twoButton" Text="2" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
    <Button x:Name="fiveButton" Text="5" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
</Grid>

在 iPhone 或小型移动设备上，我希望这些填充 90% 的屏幕宽度。但在更大的屏幕上，我希望按钮只填充屏幕宽度的 50%。

谁能建议我如何做到这一点？

Answer 1

说明

如果您需要创建引用ContentPage.Width 或ContentPage.Height 属性的布局，最好的方法是使用RelativeLayout。

如果您尝试直接引用ContentPage.Width 或ContentPage.Height 属性，您会发现Xamarin.Forms 返回-1。这是因为-1 是 Xamarin.Forms 在尚未实例化控件时使用的默认值。

RelativeLayout 使用Funcs 动态引用页面的Height 和Width 属性，并在ContentPage 实例化后返回Height 和Width 属性的真实值。

代码

using Xamarin.Forms;

namespace HorizontalButtonSampleApp
{
    public class ButtonPage : ContentPage
    {
        public ButtonPage()
        {
            const int relativeLayoutHorizontalSpacing = 5;
            const int numberOfButtons = 4;

            double screenUsePercentage;
            if (Device.Idiom.Equals(TargetIdiom.Phone))
                screenUsePercentage = 0.9;
            else
                screenUsePercentage = 0.5;

            var zeroButton = new StyledButton { Text = "0" };
            var oneButton = new StyledButton { Text = "1" };
            var twoButton = new StyledButton { Text = "2" };
            var fiveButton = new StyledButton { Text = "5" };

            var relativeLayout = new RelativeLayout();
            relativeLayout.Children.Add(zeroButton,
                                        Constraint.RelativeToParent(parent => parent.Width * (1 - screenUsePercentage) / 2),
                                        Constraint.Constant(0),
                                        Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons));
            relativeLayout.Children.Add(oneButton,
                                        Constraint.RelativeToView(zeroButton, (parent, view) => view.X + view.Width + relativeLayoutHorizontalSpacing),
                                        Constraint.Constant(0),
                                        Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons));
            relativeLayout.Children.Add(twoButton,
                                        Constraint.RelativeToView(oneButton, (parent, view) => view.X + view.Width + relativeLayoutHorizontalSpacing),
                                        Constraint.Constant(0),
                                        Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons));
            relativeLayout.Children.Add(fiveButton,
                                        Constraint.RelativeToView(twoButton, (parent, view) => view.X + view.Width + relativeLayoutHorizontalSpacing),
                                        Constraint.Constant(0),
                                        Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons));

            Content = relativeLayout;

            Padding = new Thickness(0, 20);

            Title = $"Button Page on a {Device.Idiom}";
        }
    }

    public class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new ButtonPage());
        }
    }

    public class StyledButton : Button
    {
        public StyledButton()
        {
            TextColor = Color.Black;
            HeightRequest = 60;
            BackgroundColor = Color.FromHex("2D7BF7");
            HorizontalOptions = LayoutOptions.FillAndExpand;
            VerticalOptions = LayoutOptions.CenterAndExpand;
        }
    }
}

平板电脑屏幕截图

手机屏幕截图