通過 Xamarin.Forms 中 JSON 上的組件對 ListView 進行分組

Question

我正在嘗試對 ListView 中的 JSON 中的項目進行分組。

我的 JSON 存儲在 Web 存儲庫中，我已經從服務器中提取它並列出它但未分組。

我已經閱讀了很多關於如何對 C# List 進行分組的教程，但沒有一個能解決我的問題。

這是JSON：

[
  {
    "status": "Status 1",
    "erpCode": "1901",
    "name": "Name 1",
    "statusReportDate": "24/08/2018",
    "statusReportDescription": "Description 1"
  },
  {
    "status": "Status 2",
    "erpCode": "2160",
    "name": "Name 2",
    "statusReportDate": "24/08/2018",
    "statusReportDescription": "Description 2"
  },
  {
    "status": "Status 2",
    "erpCode": "543",
    "name": "Name 3",
    "statusReportDate": "24/08/2018",
    "statusReportDescription": "Description 3"
  }
]

我從 Web 存儲庫中提取 JSON 並將其轉換為 List 和 ObservableCollection 的方法：

protected async void OnGetList()
{
    if (CrossConnectivity.Current.IsConnected)
    {

        try
        {
            //Getting JSON data from the Web
            var content = await _client.GetStringAsync(Url);

            //We deserialize the JSON data from this line
            var list = JsonConvert.DeserializeObject<List<Company>>(content);

            //After deserializing , we store our data in the List called ObservableCollection
            ObservableCollection<Company> collection = new ObservableCollection<Company>(list);
            myList.ItemsSource = collection;

        }
        catch (Exception ey)
        {
            Debug.WriteLine("" + ey);
        }
    }
}

XAML 列表視圖：

<ListView x:Name="myList" 
                  HasUnevenRows="True" 
                  ItemSelected="MyList_ItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Margin="5" HorizontalOptions="Fill">
                    <Button Text="{Binding erpCode}"/>

                    <StackLayout HorizontalOptions="Fill">
                        <Grid>
                            <Label Text="{Binding name}"/>
                            <Label Text="{Binding statusReportDate}"/>
                        </Grid>
                        <Label Text="{Binding statusReportDescription}"/>
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我想按“狀態”對其進行分組並打印如下內容：

狀態 1

姓名 1

狀態 2

姓名 2

姓名 3

狀態 N

姓名 n1

姓名 n2

姓名 n3

...

Answer 1

查看這篇文章： https : //xamarinhelp.com/xamarin-forms-listview-grouping/

但最好使用ObservableCollection ，上面的文章使用List 。

因此，您必須創建一個 ObservableCollection 類型的ObservableCollection子類。

首先創建一個子類ObservableCollection的類型，該類型將按狀態保存一組公司：

public class CompanyByStatusList : ObservableCollection<Company>
{
    public string Status { get; set; }
    public ObservableCollection<Company> Companies => this;
}

然后創建一個ObservableCollection的CompanyByStatusList 。 這將是您的ListView的 ItemsSource 。

public ObservableCollection<CompanyByStatusList> CompanyList { get; set; }

然后，您希望為每個狀態創建一個CompanyByStatusList ，其中包含處於該特定狀態的所有公司，然后將這些CompanyByStatusList中的每一個添加到CompanyList集合中。 確保設置每個CompanyByStatusList的Status屬性

並確保在ListView上設置IsGroupingEnabled="true" 。 列表視圖 xaml：

<ListView ItemsSource="{Binding CompanyList}"
      IsGroupingEnabled="true" 
         HasUnevenRows="true">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Status}" />
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Margin="5" HorizontalOptions="Fill">
                    <Button Text="{Binding erpCode}"/>

                    <StackLayout HorizontalOptions="Fill">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding name}"/>
                            <Label Text="{Binding statusReportDate}"/>
                        </StackLayout>
                        <Label Text="{Binding statusReportDescription}"/>
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>