如何在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属性的布局,最好的方法是使用a RelativeLayout.

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

RelativeLayout使用Funcs到动态引用页面的Height和Width性能,将返回的真正价值Height和Width性能,一旦ContentPage被实例化.

码

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

平板电脑屏幕截图

手机屏幕截图