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

使用网格。网格可以根据需要包含任意数量的列或行，您可以根据内容或可用空间调整它们的大小。在你的情况下，你可以有一个带有两个星大小柱的网格 - 这样可以得到两个宽度相等的列，填充可用空间，基本上是每个网格宽度的一半的两列。

<?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 Universal App 2列布局与设备大小无关

1 个答案: