Question

我想创建动态网格布局，其中一行包含2列，另一行仅包含一列，而colspan 2。并且每一列都可能包含右上角的叠加图像。为此，我尝试在网格布局中添加相对布局，但问题是相对布局中的图像标签未占据完整宽度。代码以创建相对布局

for (int i = 0; i < temp.Count; i++)
        {
            var data = temp[i];
            var framelyt = new Frame { CornerRadius = 4, IsClippedToBounds = true, HasShadow = false, Padding = 0, HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand };

            Image imageStack = new Image { Source = "placeholder_image1", Margin = 0, Aspect = Aspect.Fill, HorizontalOptions = LayoutOptions.FillAndExpand };
             Image cmpltimageStack = new Image { Source = "completed_icon", Aspect = Aspect.Fill, HeightRequest = 32, IsVisible=true };
            RelativeLayout relativeLayout = new RelativeLayout { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand, BackgroundColor = Color.Beige };
            framelyt.Content = imageStack;
            relativeLayout.Children.Add(framelyt, Constraint.RelativeToParent((parent) =>
            {
                return parent.Width;             
                }), Constraint.Constant(0));      relativeLayout.Children.Add(cmpltimageStack,
            Constraint.RelativeToParent((parent) =>
            {
               return parent.Width - 50;
            }),
            Constraint.Constant(0));
            gridStckActivity.Children.Add(relativeLayout, column, row);

            if (column == 1)
            {
                    column = 0;
                    isSingle = true;
                row++;
            }
            else
            {

                column = 1;
            }}

谢谢。

Answer 1

它可以在android设备上正常工作，但是在iOS上，它在正确的填充上留了一些空间。添加x，y和width约束后，它可以在两个设备上正常工作。这是修改后的代码。

for (int i = 0; i < temp.Count; i++)
        {
            var data = temp[i];
            var framelyt = new Frame { CornerRadius = 4, IsClippedToBounds = true, HasShadow = false, Padding = 0, HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand };

        Image imageStack = new Image { Source = "placeholder_image1", Margin = 0, Aspect = Aspect.Fill, HorizontalOptions = LayoutOptions.FillAndExpand };
         Image cmpltimageStack = new Image { Source = "completed_icon", Aspect = Aspect.Fill, HeightRequest = 32, IsVisible=true };
        RelativeLayout relativeLayout = new RelativeLayout { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand, BackgroundColor = Color.Beige };
        framelyt.Content = imageStack;
        relativeLayout.Children.Add(framelyt, Constraint.Constant(0), Constraint.Constant(0),Constraint.RelativeToParent((parent) =>
            {
                return parent.Width;
            }));                    


relativeLayout.Children.Add(cmpltimageStack,
            Constraint.RelativeToParent((parent) =>
            {
               return parent.Width - 50;
            }),
            Constraint.Constant(0));
            gridStckActivity.Children.Add(relativeLayout, column, row);
        if (column == 1)
        {
                column = 0;
                isSingle = true;
            row++;
        }
        else
        {

            column = 1;
        }  }

Xamarin.Forms：网格布局中的相对布局无法正常工作

1 个答案: