首页 文章

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

提问于
浏览 次
0

我面临相对布局的问题 . 我的目标是创建类似的布局：
enter image description here

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

这是我的代码：

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    
};

这是我的问题 . 如果我没有添加注释行，则标签不在屏幕之外 . 喜欢这里：
enter image description here

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

我没有设置任何 Height 约束，所以 should not 限制了标签的大小 .

你能帮帮我吗？谢谢！

xaml xamarin xamarin.forms xamarin-studio

2 回答

  • 1

    • 确保您正在设置RelativeLayout HorizontalOptions和VerticalOptions以填充屏幕

    • 正确计算标签X约束 view.X + view.Width + 20 - > view.X + view.Width + 10

    • 标签高度不正确，因为你没有设计它的方式 .

    这是工作示例：

    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
    回复于
  • 0

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

    例如 .

    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;})
);

    当然，你需要修改 Value 观，但基本前提是存在 .

    回复于

相关问题