Xamarin Forms

Question

我有一个屏幕的模型，我不知道如何正确实现：

我想知道如何定位Login按钮（和“登录”块）。没有“登录”，使用StackLayout会很容易。但这使得它变得不那么简单，我正在寻找一个简单的解决方案。

我认为在代码隐藏中使用AbsoluteLayout进行位置计算是可行的，但这会使整个页面比它看起来更复杂。

白色块是一个在应用程序中随处可用的Frame。它不是特定于登录页面，所以我想在其他地方重用它。

你会怎么做？

Answer 1

我认为你可以使用一个Grid ...有3行。 第1行和第2行具有相同的高度。 “登录数据”（User / pwd ...）占用第0行和第1行 按钮占据第2行和第2行

例如

<?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="fev_ventilazione_smartwatch.Pages.MyPageTest">
    <ContentPage.Content>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="8*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="4*" />
              </Grid.ColumnDefinitions>

            <Label Text="TEXT" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="3" BackgroundColor="Aqua"/>
            <Button Text="BUTTON" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" BackgroundColor="Fuchsia"/>
        </Grid>

    </ContentPage.Content>
</ContentPage>

农产品

Answer 2

  

我认为使用具有位置的AbsoluteLayout是可行的   代码隐藏中的计算，但这使整个页面更多   看起来很复杂。

是的，你是对的。使用AbsoluteLayout是可行的。但它并不像看起来那么复杂。

首先构建基本元素：

1. 白色容器/ StackLayout用于登录详细信息
2. 登录按钮。
3. Facebook / Google按钮在水平StackLayout中。
4. ＆＃34; OR＆＃34;标签
5. ＆＃34;创建一个帐户＆＃34;按钮

将它们放入AbsoluteLayout.LayoutFlags并定义他们的AbsoluteLayout.LayoutBounds以及<ContentPage.Content> <ScrollView BackgroundColor="Silver"> <AbsoluteLayout Margin="30" > <StackLayout BackgroundColor="White" HeightRequest="150" Spacing="20" Padding="10" VerticalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0,0,1,250" AbsoluteLayout.LayoutFlags="XProportional,YProportional,WidthProportional" > <Entry Text="Login" HeightRequest="30"/> <Entry Text="Password" HeightRequest="30" IsPassword="true" /> <Label Text="FORGOT YOUR PASSOWORD?" HorizontalTextAlignment="End"/> </StackLayout> <Button Text="LOGIN" FontAttributes="Bold" BackgroundColor="Maroon" TextColor="White" HeightRequest="70" WidthRequest="70" AbsoluteLayout.LayoutBounds=".5,215,70,70" AbsoluteLayout.LayoutFlags="XProportional" BorderRadius="35" /> <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" AbsoluteLayout.LayoutBounds="1,270,0.5,70" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional" > <Button Text="Facebook"/> <Button Text="Google"/> </StackLayout> <Label Text="OR" HorizontalTextAlignment="Center" AbsoluteLayout.LayoutBounds="0.5,350,50,50" AbsoluteLayout.LayoutFlags="XProportional" /> <Button Text="CREATE AN ACCOUNT" Margin="15" BackgroundColor="White" TextColor="Maroon" BorderColor="Maroon" BorderWidth="1" BorderRadius="0" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0.5,370,1,150" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional" /> </AbsoluteLayout> </ScrollView> </ContentPage.Content> 。

现在关键是要了解绝对布局如何工作？

您可以在此页面找到：Absolute Layout

我已经编写了一些代码来实现类似的功能。但是，在您可以在应用程序中使用它之前，请确保完全学习并理解所有内容：

<ContentPage 
    NavigationPage.HasBackButton="False"
    Title="MyPage">
</ContentPage>

结果如下：



注意：您也可以使用RelativeLayout实现相同的外观。

希望这有帮助。