如何实现CollectionView网格布局以单独展示赞美诗编号？

核心思路 #

CollectionView本身支持直接设置网格布局，你之前的误区是把网格放在了单个项的模板里——正确做法是给CollectionView指定全局的网格布局规则，每个项只负责显示编号即可。

具体实现步骤 #

1. 复用现有数据模型与数据源
   确保你的赞美诗模型（比如HymnModel）包含Number属性，直接复用主页面从JSON加载数据的逻辑，不需要额外修改数据源。

2. 新建网格页面的XAML代码
   在XAML中给CollectionView配置GridItemsLayout作为布局方式，同时简化ItemTemplate只保留显示编号的控件：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.HymnNumbersGridPage"
             Title="赞美诗编号">

    <CollectionView ItemsSource="{Binding Hymns}"
                    Margin="8">
        <!-- 设置网格布局：垂直排列，3列（可根据需求修改Span值） -->
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="3" />
        </CollectionView.ItemsLayout>

        <!-- 单个网格项：仅显示编号，加Frame美化样式 -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Frame Margin="4" Padding="16" CornerRadius="8" BackgroundColor="#f0f0f0">
                    <Label Text="{Binding Number}"
                           FontSize="Large"
                           FontAttributes="Bold"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"/>
                </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

3. 页面后台逻辑
   和主页面一样加载JSON数据并绑定上下文：

public partial class HymnNumbersGridPage : ContentPage
{
    public ObservableCollection<HymnModel> Hymns { get; set; }

    public HymnNumbersGridPage()
    {
        InitializeComponent();
        // 复用主页面的JSON加载逻辑
        Hymns = LoadHymnsFromJson();
        BindingContext = this;
    }

    private ObservableCollection<HymnModel> LoadHymnsFromJson()
    {
        string jsonPath = Path.Combine(FileSystem.AppDataDirectory, "hymns.json");
        string jsonContent = File.ReadAllText(jsonPath);
        // 替换成你实际的JSON反序列化逻辑
        return JsonSerializer.Deserialize<ObservableCollection<HymnModel>>(jsonContent);
    }
}

关键说明 #

• GridItemsLayout的Span属性控制网格列数，比如设为4就是4列布局，可根据屏幕尺寸动态调整（比如在代码里根据设备类型设置Span）。
• 单个项的模板可按需调整样式，比如去掉Frame直接用Label，或修改字体、颜色让编号更醒目。
• 数据源和主页面完全复用，无需额外处理JSON数据，保证数据一致性。

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