如何将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的约束lambdas之后才会调用OnSizeRRequest（）。因此，当页面布局时，标签的宽度为-1。当稍后调用ForceLayout（）时，Label有机会执行其布局逻辑，并正确设置了Width属性，因此可以正确布局。

在更大的背景下，我试图制作一个按钮，当点击时，它会淡出，标签会滑到原来的位置。它将在我的布局的右下角对齐，但我发现修改Opacity或IsVisible只会不一致地更新布局。唯一一致的行为是RelativeLayout真的喜欢在控件有机会调整大小之前询问控件的大小。

我解释如何使用RelativeLayout是错误的，还是它的逻辑错误？

Answer 1

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

要"修复"此问题，请在需要最新控件大小的约束内调用视图的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;
    }
}