首页 文章

将Xamarin Forms中的布局粘贴到底部

提问于
浏览 次
32

我正在使用Xamarin表单进行应用程序，但是我在将布局粘贴到设备底部时遇到了一些麻烦 . 我认为AbsoluteLayout会起作用，但我无法理解它是如何工作的 . 所以我创建了一个RelativeLayout，我填充了我想填充的元素，但现在我似乎无法让它始终坚持设备的底部 .

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

My application

c# layout xamarin.forms absolutelayout

6 回答

  • 7

    我想到了：

    我使用了StackLayout，其中包含三个主要的Childeren

    var stack = new StackLayout {
                Children =
                    {

                        _header,
                        _grid,
                        _footer,

                    }
            };

    然后你应该将 Headers 添加为AbsoluteLayout并记住使用：

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

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

    为页脚做同样的事情，我猜你很高兴

    回复于
  • 13

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

    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;
        ...
    }
...
}
    回复于
  • 68

    在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>

    Results:

    回复于
  • 2

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

    var stacklayout = new stackLayout()
{
     VerticalOptions = LayoutOptions.EndAndExpand
     Children = {
      //your elements
     }
}
    回复于
  • 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 选项的子项以获得最佳性能 .

    回复于
  • 2

    你明白了吗？如果没有，有几种方法可以实现这一点：请注意，我自己也有同样的问题，但这是我的理论：

    这样你就可以拥有一个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));

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

    我希望这可以帮助你

    回复于

相关问题