如何调整Xamarin Forms收藏列表的XAML实现网格布局？

核心修改思路 #

• 替换原ListView为CollectionView（Xamarin Forms官方推荐的网格/列表展示控件，布局灵活性与性能更优）
• 配置网格布局参数，匹配目标样式的列数
• 调整列表项的卡片化样式，实现圆角、阴影及区域划分

具体XAML代码修改 #

<CollectionView ItemsSource="{Binding Favorites}">
    <!-- 设置网格布局：垂直方向，2列（可根据需求调整Span值） -->
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="2" />
    </CollectionView.ItemsLayout>
    <!-- 列表项模板 -->
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <!-- 卡片容器：实现圆角、阴影效果 -->
            <Frame Margin="8,8" CornerRadius="8" HasShadow="True" Padding="0">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="120" /> <!-- 图片区域高度 -->
                        <RowDefinition Height="Auto" /> <!-- 标题行 -->
                        <RowDefinition Height="Auto" /> <!-- 辅助信息行 -->
                    </Grid.RowDefinitions>
                    <!-- 顶部图片 -->
                    <Image Grid.Row="0" Source="{Binding ImageUrl}" Aspect="AspectFill" />
                    <!-- 标题文本 -->
                    <Label Grid.Row="1" Text="{Binding Title}" Margin="12,8,12,4" 
                           FontSize="Medium" FontAttributes="Bold" />
                    <!-- 辅助描述文本 -->
                    <Label Grid.Row="2" Text="{Binding Description}" Margin="12,0,12,8" 
                           FontSize="Small" TextColor="Gray" />
                    <!-- 右上角收藏按钮 -->
                    <Button Grid.Row="0" HorizontalOptions="End" VerticalOptions="Start" 
                            Margin="8" ImageSource="heart_filled" BackgroundColor="Transparent" />
                </Grid>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

关键细节说明 #

• 布局列数调整：修改GridItemsLayout的Span属性可改变列数，目标示例为2列，所以设置Span="2"
• 卡片样式优化：Frame的CornerRadius控制圆角大小，HasShadow开启阴影效果，匹配目标样式的卡片质感
• 图片适配：Aspect="AspectFill"确保图片填充指定区域，避免拉伸变形
• 间距控制：通过Margin属性调整卡片之间、内部元素之间的间距，保证布局美观

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