Layout Xamarin表单中的溢出按钮

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

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

我认为在codebehind中使用绝对布局和位置计算是可行的，但这会使整个页面比看起来更复杂

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

---

你会怎么做？

我想你可以使用网格。。。有三排。 第1行和第2行具有相同的高度。 “登录数据”（用户/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>

产生

我认为这是可行的绝对布局与位置 在codebehind中进行计算，但这会使整个页面更加复杂 比看起来复杂

是的，你是对的。使用

绝对布局

是可行的。但它并不像看上去那么复杂

首先构建您的基本元素：

登录详细信息的白色容器/堆栈布局

登录按钮

水平堆叠布局中的Facebook/Google按钮

“或”标签

“创建帐户”按钮

将它们放入

AbsoluteLayout

中，并定义它们的

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>

结果如下：

注意：使用RelativeLayout也可以获得相同的外观

---

希望这有帮助。

我真的不明白你的意思，这怎么能帮助我让按钮部分脱离框架？不知道为什么人们会对这个答案投反对票，尽管它很短；使用网格布局仍然是一个有效的选项。（所以我再次对答案投了赞成票）@morgantouveryquilling如果你在一个网格中放置两个控件（同一行和同一列），那么第二个控件“超过”第一个控件。如果第一个控件占用第0行和第1行，第二个控件占用第1行和第2行（使用同一列），那么有两个控件占用第1行，因此第二个控件“覆盖”了第一个控件，这确实更清楚。我将尝试一下你的解决方案，Umair的一个，也许是一个相对论，并接受最接近的答案，但请接受我的投票！非常感谢您的详细回答，并花时间举例说明！试过了，我也会用一个网格和一个RelativeLayout进行一些实验，并接受最接近的答案，但你得到了一个支持票。我相信使用网格方法不会有太大的一致性。因为控件的（登录按钮）高度取决于共享行高度。在不同大小的屏幕上很难进行管理。然而，Xamarin也推荐绝对布局是一种正确的方法。干杯