Xamarin.Forms中如何从JSON文件加载数据填充CollectionView

前置说明 #

你可以选择两种实现方案：

• 优化方案：直接绑定实体类，后续扩展维护更方便（推荐）
• 兼容方案：保留原有拼接字符串的逻辑，代码改动量最小

方案1：推荐的实体绑定实现 #

第一步：确认反序列化实体类定义 #

确保你用于JSON反序列化的实体类结构正确，示例定义如下：

// 单条库存数据实体
public class InventarioItem
{
    public string N_PARTE { get; set; }
    public string DESCRIPCION { get; set; }
    public string INV_EXISTE { get; set; }
    public string UNI_MEDIDA { get; set; }
}

// 接口返回根实体
public class entrada
{
    public string response { get; set; }
    public List<InventarioItem> Data { get; set; }
}

第二步：调整页面后台绑定逻辑 #

修改集合类型与填充逻辑：

// 绑定集合类型从string改为实体类
public ObservableCollection<InventarioItem> itemlist;    
public MainPage()
{
    InitializeComponent();
    itemlist = new ObservableCollection<InventarioItem>();
    // CollectionView的x:Name设为collectionParts
    collectionParts.ItemsSource = itemlist;
}

// 反序列化后的填充逻辑
var msjdes = JsonConvert.DeserializeObject<entrada>(responseText);
string rspserver = msjdes.response;
if (response.StatusCode == System.Net.HttpStatusCode.OK)
{
    if(rspserver == "OK")
    {
        itemlist.Clear();
        foreach (var item in msjdes.Data)
        {
            // 直接添加实体，无需拼接字符串
            itemlist.Add(item);
        }
    }
}

第三步：编写XAML端CollectionView布局 #

替换原有ListView为如下CollectionView定义，完全匹配你要求的展示格式：

<CollectionView x:Name="collectionParts" Margin="10">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Spacing="3">
                <!-- 顶部分割线 -->
                <BoxView HeightRequest="1" BackgroundColor="Gray" HorizontalOptions="Fill"/>
                <Label Text="PARTE: {Binding N_PARTE}" Margin="2"/>
                <Label Text="DESC: {Binding DESCRIPCION}" Margin="2"/>
                <Label Text="INV: {Binding INV_EXISTE}" Margin="2"/>
                <Label Text="MEDIDA: {Binding UNI_MEDIDA}" Margin="2"/>
                <!-- 底部分割线 -->
                <BoxView HeightRequest="1" BackgroundColor="Gray" HorizontalOptions="Fill"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

方案2：兼容原有拼接字符串逻辑 #

如果不想改动现有后台拼接逻辑，只需修改XAML部分即可：

XAML代码 #

<CollectionView x:Name="listparts" Margin="10">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Spacing="3">
                <BoxView HeightRequest="1" BackgroundColor="Gray" HorizontalOptions="Fill"/>
                <!-- 直接绑定拼接好的字符串 -->
                <Label Text="{Binding .}" Margin="2"/>
                <BoxView HeightRequest="1" BackgroundColor="Gray" HorizontalOptions="Fill"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

注意 #

原有后台代码无需任何修改，可直接运行。 #

补充说明：CollectionView仅支持Xamarin.Forms 4.0及以上版本，如版本过低请先升级Xamarin.Forms NuGet包

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