如何将 RelativeLayout 与控件一起使用，这些控件取决于它们自己的位置大小？

Question

我在布局方面遇到了很多其他问题，需要大量额外的 InvalidateLayout() 调用，所以我开始怀疑我是否了解 RelativeLayout 的工作原理。

这是一个非常简单的 UI 示例，它需要一个右对齐的标签：

public class MainPage : ContentPage {
    public MainPage() {
        var layout = new RelativeLayout();

        var label = new Label() {
            Text = "I want to be right-aligned."
        };
        layout.Children.Add(label,
            Constraint.RelativeToParent((rl) => rl.Width - label.Width),
            Constraint.Constant(10));

        var button = new Button() {
            Text = "Invalidate"
        };
        button.Clicked += (object sender, EventArgs e) => layout.ForceLayout();
        layout.Children.Add(button,
            Constraint.Constant(10),
            Constraint.Constant(10));

        Content = layout;
    }
}

我希望这从标签正确对齐开始，但它不会正确对齐标签，直到强制执行另一个布局过程。通过在我的自定义控件中重写 OnSizeRequest() 等方法，我确定这是因为在调用 RelativeLayout 的约束 lambda 之后才会调用 OnSizeRequest()。因此，当页面布局时，标签的宽度为-1。稍后调用 ForceLayout() 时，Label 有机会执行其布局逻辑并正确设置了 Width 属性，因此布局正确。

在更大的上下文中，我正在尝试制作一个按钮，当单击该按钮时，该按钮会淡出并且标签会滑到它原来的位置。它要在我的布局的右下角对齐，但我发现修改 Opacity 或 IsVisible 只会不一致地更新布局。唯一一致的行为是 RelativeLayout 真的很喜欢在有机会调整自身大小之前询问控件的大小。

我是不是对 RelativeLayout 的使用理解有误，还是逻辑有误？

Answer 1

深入研究 RelativeLayout 的（当前）实现，我发现了一个我没想到的真相：它不咨询视图的 GetSizeRequest() 方法或调用其 Layout() 方法在计算约束之前，因为这些约束可能会影响控件的最终大小。结果：在计算约束时，控件的边界反映了它原来的位置和大小。

为了 "fix" 这个，调用视图的 GetSizeRequest() 内部约束需要最新的控件大小：

public class MainPage : ContentPage {
    public MainPage() {
        var layout = new RelativeLayout();

        var label = new Label() {
            Text = "I want to be right-aligned."
        };
        Func<RelativeLayout, double> getLabelWidth = (parent) => label.GetSizeRequest(parent.Width, parent.Height).Request.Width;
        layout.Children.Add(label,
            Constraint.RelativeToParent((rl) => rl.Width - getLabelWidth(rl)),
            Constraint.Constant(10));

        var button = new Button() {
            Text = "Invalidate"
        };
        button.Clicked += (object sender, EventArgs e) => layout.ForceLayout();
        layout.Children.Add(button,
            Constraint.Constant(10),
            Constraint.Constant(10));

        Content = layout;
    }
}

如何将 RelativeLayout 与控件一起使用，这些控件取决于它们自己的位置大小？

How do you use RelativeLayout with controls that depend on their own size for their position?

c#

xamarin

xamarin.forms