Xamarin Forms实现卡片布局：CollectionView与FlexLayout绑定方法咨询

两种方案均可实现目标卡片效果，以下是具体实现方式：

你之前得到规则表格样式的原因是默认网格布局的单元格高度是均分的，修改布局配置即可实现自适应高度的卡片流：

实现步骤： #

1. 你提供的CardModel可直接使用：

public class CardModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string ImageUrl { get; set; }
}

2. C#后台代码创建并配置CollectionView：

// 写在对应ContentPage的构造函数中即可
public YourPage()
{
    InitializeComponent();
    // 模拟你的CardModel数据源，实际使用时替换为传入的列表即可
    var cardList = new List<CardModel>
    {
        new CardModel{ Id=1, Title="卡片1", ImageUrl="本地图片路径或网络图片地址"},
        new CardModel{ Id=2, Title="卡片2长标题测试自动换行适配高度", ImageUrl="本地图片路径或网络图片地址"},
        // 其余卡片数据
    };

    var collectionView = new CollectionView
    {
        // 设置弹性布局模式，支持自动换行、内容自适应
        ItemsLayout = new FlexLayoutItemsLayout
        {
            Direction = FlexDirection.Row,
            Wrap = FlexWrap.Wrap,
            JustifyContent = FlexJustify.SpaceBetween
        },
        // 定义卡片模板
        ItemTemplate = new DataTemplate(() =>
        {
            // 卡片外层容器，加圆角阴影
            var cardFrame = new Frame
            {
                WidthRequest = DeviceDisplay.MainDisplayInfo.Width / 2 - 20, // 两列布局预留边距
                CornerRadius = 12,
                HasShadow = true,
                Margin = new Thickness(5, 10)
            };

            var cardContent = new VerticalStackLayout();
            // 图片绑定ImageUrl属性
            var cardImage = new Image
            {
                Aspect = Aspect.AspectFill,
                HeightRequest = 150
            };
            cardImage.SetBinding(Image.SourceProperty, nameof(CardModel.ImageUrl));
            
            // 标题绑定Title属性
            var titleLabel = new Label
            {
                Margin = new Thickness(8, 5),
                LineBreakMode = LineBreakMode.WordWrap
            };
            titleLabel.SetBinding(Label.TextProperty, nameof(CardModel.Title));

            cardContent.Children.Add(cardImage);
            cardContent.Children.Add(titleLabel);
            cardFrame.Content = cardContent;

            return cardFrame;
        }),
        // 绑定数据源
        ItemsSource = cardList
    };

    Content = collectionView;
}

FlexLayout本身没有内置的ItemsSource绑定属性，需要手动遍历数据源添加子元素并绑定属性，适合数据量较少的场景：

public YourPage()
{
    InitializeComponent();
    // 替换为实际传入的CardModel列表
    var cardList = new List<CardModel>
    {
        // 卡片数据源
    };

    var flexLayout = new FlexLayout
    {
        Direction = FlexDirection.Row,
        Wrap = FlexWrap.Wrap,
        JustifyContent = FlexJustify.SpaceBetween,
        Padding = new Thickness(10)
    };

    // 遍历数据源动态生成卡片
    foreach(var card in cardList)
    {
        var cardFrame = new Frame
        {
            WidthRequest = DeviceDisplay.MainDisplayInfo.Width / 2 - 20,
            CornerRadius = 12,
            HasShadow = true,
            Margin = new Thickness(5, 10),
            BindingContext = card
        };

        var cardContent = new VerticalStackLayout();
        var cardImage = new Image
        {
            Aspect = Aspect.AspectFill,
            HeightRequest = 150
        };
        cardImage.SetBinding(Image.SourceProperty, nameof(CardModel.ImageUrl));

        var titleLabel = new Label
        {
            Margin = new Thickness(8, 5),
            LineBreakMode = LineBreakMode.WordWrap
        };
        titleLabel.SetBinding(Label.TextProperty, nameof(CardModel.Title));

        cardContent.Children.Add(cardImage);
        cardContent.Children.Add(titleLabel);
        cardFrame.Content = cardContent;

        flexLayout.Children.Add(cardFrame);
    }

    Content = flexLayout;
}

注意：如果卡片数量超过20条，优先选择CollectionView方案，避免滑动卡顿。

内容的提问来源于stack exchange，提问作者Newbie