Xamarin.Forms 独立于设备大小的通用应用程序 2 列布局

Question

我对 Xamarin.Forms 创建通用应用程序还很陌生。实际上，我必须将大型本机应用程序迁移到 Xamarin.Forms 技术。

我必须创建一个独立于设备大小的两列布局（例如注册页面）。

我正在尝试使用 RelativeLayout 实现相同的目的。相同的代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage BackgroundColor="Yellow" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LearningXamarin.Views.TestPage">
    <ContentPage.Content>
        <RelativeLayout>
            <StackLayout x:Name="mainLayout" BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=0}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=0}">
                <RelativeLayout>
                    <BoxView x:Name="firstView" BackgroundColor="Yellow" HeightRequest="30"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=5}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.48, Constant=0}"
                    />
                    <BoxView BackgroundColor="Green" HeightRequest="30"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Width, Factor=1, Constant=10}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Y, Factor=1, Constant=0}"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Width, Factor=1, Constant=0}"
                    />
                </RelativeLayout>

            </StackLayout>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

请建议这是实现两列布局的正确方法还是有其他正确方法。

Answer 1

使用网格。网格可以根据需要包含任意数量的列或行，并且您可以根据内容或可用 space 调整它们的大小。在你的情况下，你可以有一个带有两个星形大小列的网格 - 这给出了两个宽度相等的列来填充可用的 space，基本上是两列，每个列都是屏幕宽度的一半。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage BackgroundColor="Yellow" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LearningXamarin.Views.TestPage">
    <ContentPage.Content>
        <Grid BackgroundColor="Maroon">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <BoxView Grid.Column="0" x:Name="firstView" BackgroundColor="Yellow" HeightRequest="30"/>
            <BoxView Grid.Column="1" BackgroundColor="Green" HeightRequest="30"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

您可以在此处了解不同的网格大小：

https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/grid/

Xamarin.Forms 独立于设备大小的通用应用程序 2 列布局

Xamarin.Forms Universal App 2 Column Layout independent of device size

layout

grid-layout

xamarin

xamarin.forms