如何让布局占据不同方向的屏幕空间百分比？

Question

我正在努力学习 Xamarin.Forms 的基础知识，为几个月后的第一个项目做准备。为此，我尝试制作一个计算器，目前正在尝试正确布局。我希望它让“显示”占据屏幕的 1/4，按钮占据屏幕的剩余 3/4，当方向改变时，我希望它改变比率。

目前我已经在纵向视图中完成了这项工作

但是当我旋转屏幕时，它看起来像这样：

我希望能够将显示位从左侧移动到屏幕顶部，并且可能会更改它的大小，以便它可以容纳所有 4 行文本。

这是我的 Calc 页面的 XAML。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Calculator.Pages.CalcPage"
             Title="Calculator">

    <ContentPage.ToolbarItems>
        <ToolbarItem Name="Settings" Text="Settings" Priority="0" Activated="Settings_Activated"/>
    </ContentPage.ToolbarItems>


    <ContentPage.Content>
        <StackLayout x:Name="MainStack" Spacing="0" >
            <StackLayout x:Name="DisplayStack" VerticalOptions="FillAndExpand" Spacing="0">
                <Grid x:Name="DisplayGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height ="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Label x:Name="NumLabel1" Text ="" FontSize="Medium" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="Center" Grid.Row="0"/>
                    <Label x:Name="OpLabel" Text="" FontSize="Small" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="End" Grid.Row="1"/>
                    <Label x:Name="NumLabel2" Text ="" FontSize="Medium" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="Center" Grid.Row="2"/>
                    <Label x:Name="ResLabel" Text ="" FontSize="Large" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="Center" Grid.Row="3"/>
                </Grid>
            </StackLayout>

            <StackLayout x:Name="ButtonStack" VerticalOptions="FillAndExpand" Spacing="0">
                <Grid x:Name="ButtonsGrid">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="18*"/>
                        <RowDefinition Height="18*"/>
                        <RowDefinition Height="18*"/>
                        <RowDefinition Height="18*"/>
                        <RowDefinition Height="18*"/>
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="20*"/>
                    </Grid.ColumnDefinitions>

                    <Button ClassId="Btn0" Text="0" Clicked="NumBtnClk_Event" Grid.Row="3" Grid.Column="1"
                            StyleClass="Default"/>
                    <Button ClassId="Btn1" Text="1" Clicked="NumBtnClk_Event" Grid.Row="2" Grid.Column="0"/>
                    <Button ClassId="Btn2" Text="2" Clicked="NumBtnClk_Event" Grid.Row="2" Grid.Column="1"/>
                    <Button ClassId="Btn3" Text="3" Clicked="NumBtnClk_Event" Grid.Row="2" Grid.Column="2"/>
                    <Button ClassId="Btn4" Text="4" Clicked="NumBtnClk_Event" Grid.Row="1" Grid.Column="0"/>
                    <Button ClassId="Btn5" Text="5" Clicked="NumBtnClk_Event" Grid.Row="1" Grid.Column="1"/>
                    <Button ClassId="Btn6" Text="6" Clicked="NumBtnClk_Event" Grid.Row="1" Grid.Column="2"/>
                    <Button ClassId="Btn7" Text="7" Clicked="NumBtnClk_Event" Grid.Row="0" Grid.Column="0"/>
                    <Button ClassId="Btn8" Text="8" Clicked="NumBtnClk_Event" Grid.Row="0" Grid.Column="1"/>
                    <Button ClassId="Btn9" Text="9" Clicked="NumBtnClk_Event" Grid.Row="0" Grid.Column="2"/>

                    <Button ClassId="Btn+" Text="+" Clicked="OprBtnClk_Event" Grid.Row="0" Grid.Column="3"/>
                    <Button ClassId="Btn-" Text="-" Clicked="OprBtnClk_Event" Grid.Row="1" Grid.Column="3"/>
                    <Button ClassId="BtnX" Text="X" Clicked="OprBtnClk_Event" Grid.Row="2" Grid.Column="3"/>
                    <Button ClassId="Btn/" Text="/" Clicked="OprBtnClk_Event" Grid.Row="3" Grid.Column="3"/>

                    <Button ClassId="Btn." Text="." Clicked="BtnClkPoint_Event" Grid.Row="3" Grid.Column="0"/>
                    <Button ClassId="BtnC" Text="AC" Clicked="BtnClkClear_Event" Grid.Row="3" Grid.Column="2"/>
                    <Button ClassId="Btn=" Text="=" Clicked="BtnClkEquals_Event" Grid.Row="4" Grid.Column="3"/>

                </Grid>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

在 C# 中，我有这个用于检测方向变化的函数。

private double width = 0;
private double height = 0;

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    if(this.width != width || this.height != height)
    {
        this.width = width;
        this.height = height;
    }

    if(width > height)
    {
        MainStack.Orientation = StackOrientation.Horizontal;
        DisplayStack.VerticalOptions = LayoutOptions.Start;
        ButtonStack.VerticalOptions = LayoutOptions.End;
    }
    else
    {
        MainStack.Orientation = StackOrientation.Vertical;
    }       
}

Answer 1

在横向模式下，删除Display 和Buttons 堆栈中的VerticalOptions = FillAndExpand，并添加HorizontalOptions = FillAndExpand