Xamarin.Forms 相对布局的奇怪行为

Question

我面临相对布局的问题。 我的目标是创建类似的布局：

免责声明：这个应该是相对布局只是因为我需要添加一些其他元素，这些元素的位置取决于这两个。

这是我的代码：

var layout = new RelativeLayout();

var box = new BoxView { BackgroundColor = Color.Olive, WidthRequest = 50, HeightRequest = 50 };

var label = new Label
{
    LineBreakMode = LineBreakMode.WordWrap,
    Text = "Here is a lot of text ..... Here is a lot of text";
};
layout.Children.Add(box, Constraint.Constant(10), Constraint.Constant(10));
layout.Children.Add(label,
    Constraint.RelativeToView(box, (relativeLayout, view) => view.X + view.Width + 20),
    Constraint.RelativeToView(box, (relativeLayout, view) => view.Y),
    //Constraint.RelativeToParent(relativeLayout => relativeLayout.Width - 20 - 50 -10));


MainPage = new ContentPage
{
    Content = layout    
};

这是我的问题。如果我不添加注释行，则标签不在屏幕上。 喜欢这里：

如果我添加注释字符串（这是宽度约束），那么还有另一个奇怪的事情：文本没有完全显示。我的意思是应该还有大约 10 个单词，但它们突然消失了。

我没有设置任何 高度 约束，因此它不应限制标签的大小。

你能帮我解决这个问题吗？ 谢谢！

Answer 1

• 确保将 RelativeLayout Horizo​​ntalOptions 和 VerticalOptions 设置为填充屏幕
• 正确计算标签 X 约束 view.X + view.Width + 20 -> view.X + view.Width + 10
• 标签高度不正确，因为您没有设置它。当您使用 AbsoluteLayout 或 RelativeLayout 时，您必须手动设置其子级大小。就是这样设计的。

这是工作示例：

    var layout = new RelativeLayout() {
        HorizontalOptions = LayoutOptions.FillAndExpand,
        VerticalOptions = LayoutOptions.FillAndExpand
    };

    const double boxSize = 50;
    const double margin = 10;

    var box = new BoxView { 
        BackgroundColor = Color.Olive, 
        WidthRequest = boxSize, 
        HeightRequest = boxSize 
    };

    var label = new Label {
        LineBreakMode = LineBreakMode.WordWrap,
        Text = "Cras efficitur, sem a scelerisque pretium, leo turpis cursus lacus, id consequat erat risus sit amet tortor. Nullam fringilla vestibulum mauris, vel fringilla lectus molestie eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis elit eu nulla varius consectetur. Ut eleifend odio at malesuada lacinia. Fusce neque orci, efficitur nec condimentum et, volutpat id odio. Quisque vel metus vitae lectus vulputate placerat. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ipsum nec tincidunt porta, enim lacus consequat magna, nec scelerisque lacus lacus luctus mi. Proin rutrum luctus libero, sed lacinia tellus. Nunc dapibus arcu dui, quis bibendum elit interdum sit amet. Vivamus sed consequat mi. Aliquam sagittis ante ac massa bibendum, eu pharetra diam malesuada. Duis maximus magna id lorem lacinia, sed consectetur quam sagittis. Fusce at pulvinar ex."
    };
    layout.Children.Add(box, Constraint.Constant(margin), Constraint.Constant(margin));

    layout.Children.Add(label,
        Constraint.RelativeToView(box, (relativeLayout, view) => view.X + boxSize + margin),
        Constraint.RelativeToView(box, (relativeLayout, view) => view.Y),
        Constraint.RelativeToParent((relativeLayout) => relativeLayout.Width - boxSize - margin * 3),
        Constraint.RelativeToParent((relativeLayout) => relativeLayout.Height * 0.8f)); // eg. 80% of its parent

Answer 2

没有什么可以阻止您在相对布局中利用堆栈的布局。

例如

var stackLayout = new StackLayout {
    Orientation = StackOrientation.Horizontal,
    Padding = new Thickness (20, 10, 10, 0),
    Children = {
        new BoxView { 
            BackgroundColor = Color.Olive, 
            WidthRequest = 50, 
            HeightRequest = 50, 
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.Start
        },
        new Label {
            LineBreakMode = LineBreakMode.WordWrap,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            Text = "Here is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of textHere is a lot of text ..... Here is a lot of text"
        }
    }
};

var relLayout = new RelativeLayout ();
relLayout.Children.Add (stackLayout, 
    Constraint.Constant (0), 
    Constraint.Constant (0), 
    Constraint.RelativeToParent((p)=>{return p.Width;}),
    Constraint.RelativeToParent((p)=>{return p.Height;})
);

当然，您需要修改这些值，但基本前提是存在的。