Question

我正在遵循一些非常标准的Xamarin forms tutorials，我真的很难让RelativeLayout工作。最后，我希望将ActivityIndicator覆盖在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;

我可以看到绿色和粉红色的视图，但它们也可以堆叠（而不是叠加） - 但我也看不到粉红色绝对布局中的活动指示器。

Answer 1

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

儿童视图
X约束
Y约束
宽度约束
高度限制

所有约束都是可选的。

要明确地将其放在整个屏幕上，请执行以下操作：

# Unit: microseconds
   # expr        min          lq        mean      median          uq        max neval
 # f1(df)    693.765    769.8995    878.3698    815.6655    846.4615   3559.929   100
     # f2 627876.429 646057.8155 671925.4799 657768.6270 694047.9940 797900.142   100
     # f3  49570.397  52038.3515  54334.0501  53838.8465  56181.0515  62517.965   100
     # f4  28892.611  30046.8180  31961.4085  31262.4040  33057.5525  48694.850   100
     # f5  49866.379  51491.7235  54413.8287  53705.3970  55962.0575  75287.600   100

对于AbsoluteLayout，尝试一组略有不同的约束：

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

这明确指出mainContent是占用整个AbsoluteLayout而不是依赖mainContent的实际布局大小。

Xamarin表示RelativeLayout没有出现

1 个答案: