为啥横向模式下的扩展布局在 Xamarin Forms 中显示半黑屏？

Posted 2023-04-18

【中文标题】为啥横向模式下的扩展布局在 Xamarin Forms 中显示半黑屏？

【英文标题】：Why does extented layout on landscape mode shows half black screen in Xamarin Forms?为什么横向模式下的扩展布局在 Xamarin Forms 中显示半黑屏？

【发布时间】：2020-12-23 07:41:01

【问题描述】：

我有两个视图和两个内容页面，我让它们垂直排列，当设备处于纵向模式时显示，如下所示：

<StackLayout>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <views:ScoresView Grid.Row="0"/>
                <views:CategoriesView Grid.Row="1"/>

            </Grid>
        </StackLayout>

以及横向模式的其他内容页面

<StackLayout>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <views:ScoresView Grid.Column="0"/>
            <views:CategoriesView Grid.Column="1"/>
        </Grid>
    </StackLayout>

我希望它看起来像这样：

但看起来像这样：

这就是我在旋转移动时调用其中一个或另一个的方式

protected override void OnSizeAllocated(double width, double height)
        
            base.OnSizeAllocated(width, height);
            if (width > height)
            
                //device is landscape
                App.Current.MainPage = new CategoriesLands();
            
            else
            
                //device is portrait (or square)
            
        

【参考方案1】：

您可以更改 StackLayout StackOrientation 属性来达到效果。

<StackLayout x:Name="outerStack">       
     <views:ScoresView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
     <views:CategoriesView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</StackLayout>

在后面的代码中：

private double width;
private double height;
protected override void OnSizeAllocated(double width, double height)
    
        base.OnSizeAllocated(width, height);
        if (width != this.width || height != this.height)
        
            this.width = width;
            this.height = height;
            if (width > height)
            
                outerStack.Orientation = StackOrientation.Horizontal;
            
            else
            
                outerStack.Orientation = StackOrientation.Vertical;
            
        
    

您可以参考this。