Xamarin 表单 RelativeLayout 未出现

Question

我遵循一些非常标准的Xamarin forms tutorials，我真的很难让RelativeLayout 正常工作。最终，我希望将 ActivityIndi​​cator 覆盖在 mainContent 之上：

        BindingContext = new LoginViewModel(this);
        Padding = new Thickness(20);

        Title = "Login";

        var image = new Image
        {
            Source = ImageSource.FromFile("logo.png"),
            HeightRequest = 50
        };

        var label = new Label
        {
            Text = "...",
            FontSize = 20,
            HorizontalTextAlignment = TextAlignment.Center
        };
        var errorLabel = new Label
        {
            Text = "",
            TextColor = Color.Red,
            FontSize = 20,
            HorizontalTextAlignment = TextAlignment.Center
        };

        var loginButton = new Button
        {
            Text = "Log In",
            BackgroundColor = Color.Black,
            TextColor = Color.White,
            FontSize = 20,
            HeightRequest = 50
        };

        var loginEntry = new Entry
        {
            Placeholder = "Username"
        };

        var passwordEntry = new Entry
        {
            Placeholder = "Password"
        };

        var copywrite = new Label
        {
            Text = "© 2016",
            FontSize = 15,
            HorizontalTextAlignment = TextAlignment.Center
        };

        var loadingIndicator = new ActivityIndicator
        {
            BackgroundColor = Color.Blue,
            IsVisible = true
        };

        ...

        var topLayer = new StackLayout
        {
            Spacing = 10,
            Children = { image, label, loginEntry, passwordEntry, loginButton, errorLabel },
            VerticalOptions = LayoutOptions.Start
        };

        var bottomLayer = new StackLayout
        {               
            Spacing = 10,
            Children = { copywrite },
            VerticalOptions = LayoutOptions.End
        };

        var mainContent = new StackLayout
        {
            Children =
            {
                topLayer,
                new StackLayout 
                {
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                },
                bottomLayer
            },
            VerticalOptions = LayoutOptions.FillAndExpand,
            BackgroundColor = Color.Green
        };

        var r = new RelativeLayout()
        {
            BackgroundColor = Color.Pink
        };
        r.Children.Add(mainContent, 
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height;
            })
        );

        Content = r;

当我设置 Content = mainContent 时，我看到一切正常，但是使用上面的代码我得到一个白屏。我一直在寻找here。

当我尝试这个时：

        var overlay = new AbsoluteLayout()
        {
            BackgroundColor = Color.Pink
        };
        AbsoluteLayout.SetLayoutFlags(mainContent, AbsoluteLayoutFlags.PositionProportional);
        AbsoluteLayout.SetLayoutBounds(mainContent, new Rectangle(0f, 0f, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
        AbsoluteLayout.SetLayoutFlags(loadingIndicator, AbsoluteLayoutFlags.PositionProportional);
        AbsoluteLayout.SetLayoutBounds(loadingIndicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
        overlay.Children.Add(mainContent);
        overlay.Children.Add(loadingIndicator);

        Content = overlay;

我可以看到 Green 和 Pink 视图，但它们也可以堆叠（而不是重叠） - 但我也看不到 Pink Absolute 布局内的 Activity Indicator。

Answer 1

对于RelativeLayout，您调用的Add 方法是在X 和Y 上设置约束，而不是在宽度和高度上。 Add 变体的参数顺序为：

1. 子视图
2. X 约束
3. Y 约束
4. 宽度限制
5. 高度限制

所有约束都是可选的。

要将其显式放置在整个屏幕上，请执行以下操作：

r.Children.Add(mainContent, 
    Constraint.Constant(0),
    Constraint.Constant(0),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Width;
    }),
    Constraint.RelativeToParent((parent) =>
    {
        return parent.Height;
    })
);

对于 AbsoluteLayout，尝试一组稍微不同的约束：

    AbsoluteLayout.SetLayoutFlags(mainContent, AbsoluteLayoutFlags.All);
    AbsoluteLayout.SetLayoutBounds(mainContent, new Rectangle(0f, 0f, 1f, 1f));

这明确指定mainContent要占据整个AbsoluteLayout，而不是依赖mainContent的实际布局大小。