c# - 如何将 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 的(当前)实现，我发现了一个出乎我意料的事实:它不咨询 View 的 GetSizeRequest() 方法或调用它的方法Layout() 方法，因为这些约束可能会影响控件的最终大小。结果:在计算约束时，控件的边界反射(reflect)了它原来的位置和大小。

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