将 Xamarin 表单中的布局粘贴到底部

Posted 2023-03-25

【中文标题】将 Xamarin 表单中的布局粘贴到底部

【英文标题】：Stick Layout in Xamarin Forms to bottom

【发布时间】：2015-02-26 20:58:47

【问题描述】：

我正在 Xamarin 表单中制作应用程序，但在将布局粘贴到设备底部时遇到了一些问题。我认为 AbsoluteLayout 会起作用，但我无法理解它是如何工作的。所以我做了一个RelativeLayout，我填充了我想要填充的元素，但现在我似乎无法让它一直粘在设备的底部。

下面是一个屏幕截图，希望能让事情更清楚一点。 我有一个 stacklayout，我用 headerlayout 和 contentlayout 填充。但是如果我只是将footerlayout添加到stacklayout中，它就不会粘在页面底部，而是（逻辑上）就在前一个孩子的后面。现在我认为 Absolutelayout 可以解决问题，但我似乎无法掌握它的功能和 Layoutflags 和边界。有人可以帮帮我吗？

【参考方案1】：

<StackLayout>
  <StackLayout Orientation="Horizontal" VerticalOptions="Start">
    <!-- top controls -->
  </StackLayout>

  <StackLayout VerticalOptions="CenterAndExpand">
    <!-- middle controls -->
  </StackLayout>

  <StackLayout Orientation="Horizontal" VerticalOptions="End">
    <!-- bottom controls -->
  </StackLayout>
</StackLayout>

确保拥有不超过一个具有Expand 选项的孩子以获得最佳性能。

【讨论】：

发现如果内容不够大，这确实会使中间堆栈布局居中，但这不是我想要的，将其设置为 StartAndExpand 会将其置于顶部堆栈布局下方的顶部和底部一个仍将保持在屏幕底部。

VerticalOptions="End" 是否总是将控件放在底部，还是取决于文化？

我希望底部布局始终保持在那里，即使键盘正在显示，但它目前将其向上推。无论如何要阻止此功能？

这种方法也适用于 Xamarin.Forms 4.6 项目。在我的情况下，底部控件保持粘性，中间控件包含 ScrollView .......

中的可滚动内容

【参考方案2】：

您可以使用 VerticalOptions 将布局发送到底部。

var stacklayout = new stackLayout()

     VerticalOptions = LayoutOptions.EndAndExpand
     Children = 
      //your elements
     

【参考方案3】：

在 RelativeLayout 中，我通过定义高度和 Y 约束得到了最好的结果。

<RelativeLayout>
        <StackLayout VerticalOptions="Start" BackgroundColor="Green"
                    RelativeLayout.WidthConstraint="ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1"
                    RelativeLayout.HeightConstraint="ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25">
          <!-- Top Content -->
          <Button Text="Top Button" Clicked="Button_OnClicked" />
        </StackLayout>

        <StackLayout VerticalOptions="Center" BackgroundColor="Aqua"
                          RelativeLayout.WidthConstraint="ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1"
                          RelativeLayout.YConstraint="ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.30"
                          RelativeLayout.HeightConstraint="ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6">
          <!-- Mid Content -->
          <Button Text="Mid Button" Clicked="Button_OnClicked" /> 
        </StackLayout>

        <StackLayout VerticalOptions="End" BackgroundColor="Yellow"
                          RelativeLayout.WidthConstraint="ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1"
                          RelativeLayout.YConstraint="ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.90"
                          RelativeLayout.HeightConstraint="ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1">

          <!-- Bottom Content -->
          <Button Text="Bottom Button" Clicked="Button_OnClicked" />
        </StackLayout>
</RelativeLayout>

结果：

【讨论】：

如何占据中间所有区域？

【参考方案4】：

你想清楚了吗？ 如果没有，有几种方法可以实现： 请注意，我自己也遇到了同样的问题，但这是我的理论：

这样您就可以拥有一个 StackLayout，在其中填充三个“主要子代”。第一个可能是绝对或相对布局（我还不太清楚区别）。从理论上讲，您应该能够将元素添加到绝对布局，然后在第一个元素之上添加元素，因为绝对布局使用 z-index，其工作方式类似于 Photoshop 中的图层。所以换句话说就是这样：

var topAbsoluteLayout = new AbsoluteLayout();

            topAbsoluteLayout.Children.Add(header, new Point(0, 0));
            topAbsoluteLayout.Children.Add(element1, new Point(x,y));
            topAbsoluteLayout.Children.Add(element2, new Point(x, y));

然后你应该对页脚做同样的事情，并记住将 topAbsoluteLayout 添加到 StackLayout 中的 Childeren。

希望对你有帮助

【参考方案5】：

这是我用来自动执行此操作的一个类。通过将类扩展为具有可滚动的中心部分（因此如果太长它不会与底部重叠）等，您可以进行大量添加！

public class CakeLayout : StackLayout

    public CakeLayout()
    
        TopStack = new StackLayout // TOP stack
        
            Orientation = StackOrientation.Horizontal,
            VerticalOptions = LayoutOptions.Start
        ;

        CenterStack = new StackLayout // CENTER stack
        
            VerticalOptions = LayoutOptions.CenterAndExpand
        ;

        BottomStack = new StackLayout // BOTTOM stack
        
            Orientation = StackOrientation.Horizontal,
            VerticalOptions = LayoutOptions.End
        ;

        Children.Add(TopStack);
        Children.Add(CenterStack);
        Children.Add(BottomStack);
    

    public StackLayout BottomStack  get; private set; 
    public StackLayout CenterStack  get; private set; 
    public StackLayout TopStack  get; private set; 

然后以这个为页面，例如：

public class MyPage

    public MyPage()
    
        CakeLayout cakeLayout = new CakeLayout();

        cakeLayout.TopStack.Children.Add(new Label  Text = "Hello Cake" );   
        cakeLayout.CenterStack.Children.Add(MyListView);
        cakeLayout.BottomStack.Children.Add(MyButton);

        // Assign the cake to the page
        this.Content = cakeLayout;
        ...
    
...

【参考方案6】：

我想通了：

我用了一个StackLayout，里面包含了三个主要的Childeren

 var stack = new StackLayout 
                Children =
                    

                        _header,
                        _grid,
                        _footer,

                    
            ;

然后您应该将标题添加为 AbsoluteLayout 并记住使用：

 
    AbsoluteLayout.SetLayoutFlags(_imageYouWantToUse, AbsoluteLayoutFlags.PositionProportional);
    AbsoluteLayout.SetLayoutBounds(_imageYouWantToUse, new Rectangle(x, y, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
_headerAbsLayout.Children.Add(_imageYouWantToUse);
    

而对于主网格或主要内容，您应该在 StackLayout 中使用网格，这样您就可以确定布局是垂直的（方向，在这里使用正确）。

对页脚做同样的事情，我想你很高兴

【参考方案7】：

就是这么简单

AbsoluteLayout.SetLayoutFlags(footer, AbsoluteLayoutFlags.YProportional | AbsoluteLayoutFlags.WidthProportional);
AbsoluteLayout.SetLayoutBounds(footer, new Rectangle(0, 1, 1, AbsoluteLayout.AutoSize));
absoluteLayout.Children.Add(footer);