Question

我试图在iOS和Android的Xamarin表单中创建画廊样式的网格视图，但是有一个问题，即布局选项似乎被忽略了，并且在iOS和Android中我得到了不同的结果。

基本布局是：带有边框（红色）的框架，其中水平和垂直选项的堆栈布局（粉红色）均设置为FillAndExpand，其中顶部包含标签，而下方图像则用于填充其余堆栈。图像似乎只是扩展到堆栈和框架之外，而忽略了垂直选项集。

我尝试将这些垂直选项设置为Fill，FillAndExpand，CentreAndExpand，但所有结果都相同。

如果我删除了堆栈布局和标签，并将图像作为框架中的唯一子元素，则它可以按预期工作，但是我还必须显示标签。

横向和纵向的结果相同。

iOS平台上的结果是此处的主要问题：用于将图像添加到网格的代码：

var imageSource = ImageSource.FromStream(() => new MemoryStream(imageData));
var framedImage = new Frame
{
    Padding = 0,
    Margin = 3,
    GestureRecognizers = { tapGesture },
    Content = new StackLayout
    {
        Padding = 10,
        HorizontalOptions = LayoutOptions.FillAndExpand,
        VerticalOptions = LayoutOptions.FillAndExpand,
        BackgroundColor = Color.Pink,
        Children =
        {
            textLabel,
            new Image
            {
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                Source = imageSource,
                Aspect = Aspect.AspectFit
            },
        }
    },
    BackgroundColor = StyleSheet.BackgroundColorLight,
    BorderColor = StyleSheet.OutlineColorDark,
    CornerRadius = 5,
    HasShadow = false
};

grid.Children.Add(framedImage, columnCounter, rowCounter);

谢谢！

Answer 1

通过以下操作解决了该问题：

var image = new Image
{
    VerticalOptions = LayoutOptions.FillAndExpand,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Source = imageSource,
    Aspect = Aspect.AspectFit
};

var framedImage = new Frame
{
    Padding = 2,
    Margin = 1,
    GestureRecognizers = { tapGesture },
    Content = image,
    HasShadow = false,
    VerticalOptions = LayoutOptions.FillAndExpand,
    HorizontalOptions = LayoutOptions.FillAndExpand
};

var innergrid = new Grid
{
    RowDefinitions =
    {
        new RowDefinition {Height = new GridLength(20, GridUnitType.Auto)},
        new RowDefinition {Height = new GridLength(20, GridUnitType.Star)},
    }
};

innergrid.Children.Add(textLabel, 0, 0);
innergrid.Children.Add(framedImage, 0, 1);

var frame = new Frame
{
    Padding = 5,
    Margin = 3,
    GestureRecognizers = { tapGesture },
    Content = innergrid,
    BackgroundColor = StyleSheet.BackgroundColorLight,
    BorderColor = StyleSheet.OutlineColorDark,
    CornerRadius = 5,
    HasShadow = true
};

grid.Children.Add(frame, columnCounter, rowCounter);

我可能会使用新的FlexLayout看看我是否可以拥有更简单的代码

Xamarin-图像溢出StackLayout

1 个答案: