json - 选择一个国家后，如何查看一个国家的详细信息（我的列表视图）？

Question

我有一个 json 文件，其中包含国家和由 covid 引起的病例和死亡的详细信息。我在 MainPage 中有我的列表视图，这些国家/地区已成功列出。现在，我希望在用户单击一个国家/地区后显示每个国家/地区的详细信息。

这是 Region.cs

using System;
 using System.Collections.Generic;
 using System.Text;
    
 namespace just4jsonCLOSE.Models
 {
     // Root myDeserializedClass = JsonConvert.DeserializeObject<Root>(myJsonResponse); 
     public class RegionData
     {
         public string country { get; set; }
         public int totalCases { get; set; }
         public int newCases { get; set; }
         public int totalDeaths { get; set; }
         public int newDeaths { get; set; }
         public int totalRecovered { get; set; }
         public int activeCases { get; set; }
         public int seriousCritical { get; set; }
         public int casesPerMil { get; set; }
         public double deathsPerMil { get; set; }
         public int totalTests { get; set; }
         public int testsPerMil { get; set; }
         public int population { get; set; }
     }
    
     public class RegionList
     {
         public List<RegionData> regionData { get; set; }
     }
    
    
 }

我的 MainPage.xaml.cs

 namespace just4jsonCLOSE
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class MainPage : ContentPage
     {
         public MainPage()
         {
             InitializeComponent();
             GetJsonData();
         }
    
         void GetJsonData()
         {
             string jsonFileName = "region.json";
             RegionList ObjContactList = new RegionList();
             var assembly = typeof(MainPage).GetTypeInfo().Assembly;
             Stream stream = assembly.GetManifestResourceStream($"{assembly.GetName().Name}.{jsonFileName}");
             using (var reader = new System.IO.StreamReader(stream))
             {
                 var jsonString = reader.ReadToEnd();
    
                 //Converting JSON Array Objects into generic list  
                 ObjContactList = JsonConvert.DeserializeObject<RegionList>(jsonString);
             }
             //Binding listview with json string   
             listviewRegions.ItemsSource = ObjContactList.regionData;
         }
     }
 }

我的 MainPage.xaml（我已经评论了除第一个 :country 之外的所有绑定标签）

<Grid>
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto"/>
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
             <Label Grid.Row="0" Margin="30" Text="Details per country about COVID" FontSize="25" />
             <ListView x:Name="listviewRegions" Grid.Row="1" HorizontalOptions="FillAndExpand" Footer="" HasUnevenRows="True">
                 <ListView.ItemTemplate>
                     <DataTemplate>
                         <ViewCell>
                             <Grid HorizontalOptions="FillAndExpand" Padding="10">
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="Auto"/>
                                     <RowDefinition Height="Auto"/>
                                     <RowDefinition Height="Auto"/>
                                     <RowDefinition Height="Auto"/>
                                 </Grid.RowDefinitions>
                                 <Label Text="{Binding country}" HorizontalOptions="StartAndExpand" Grid.Row="0" TextColor="Black"  FontAttributes="Bold" />
                        <!--         <Label Text="{Binding totalCases}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding newCases}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding totalDeaths}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding newDeaths}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding totalRecovered}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding activeCases}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding seriousCritical}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding casesPerMil}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding deathsPerMil}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding totalTests}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding testsPerMil}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                 <Label Text="{Binding population}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/> -->
                                    
                                 <BoxView HeightRequest="2" Margin="0,10,10,0" BackgroundColor="Gray" Grid.Row="3" HorizontalOptions="FillAndExpand" />
                             </Grid>
                         </ViewCell>
    
                     </DataTemplate>
                 </ListView.ItemTemplate>
             </ListView>
         </Grid>
     </Grid>

最后是我的 region.json 文件（小部分）

 {
     "regionData": [
         {
             "country": "World",
             "totalCases": 157341642,
             "newCases": 651328,
             "totalDeaths": 3278509,
             "newDeaths": 9126,
             "totalRecovered": 135480211,
             "activeCases": 18582922,
             "seriousCritical": 108879,
             "casesPerMil": 20185,
             "deathsPerMil": 420.6,
             "totalTests": 0,
             "testsPerMil": 0,
             "population": 0
         },
         {
             "country": "Europe",
             "totalCases": 45325498,
             "newCases": 111518,
             "totalDeaths": 1031121,
             "newDeaths": 2579,
             "totalRecovered": 40490614,
             "activeCases": 3803763,
             "seriousCritical": 27087,
             "casesPerMil": 0,
             "deathsPerMil": 0,
             "totalTests": 0,
             "testsPerMil": 0,
             "population": 0
         },
         {
             "country": "Asia",
             "totalCases": 42985197,
             "newCases": 499649,
             "totalDeaths": 558151,
             "newDeaths": 5628,
             "totalRecovered": 36953518,
             "activeCases": 5473528,
             "seriousCritical": 33491,
             "casesPerMil": 0,
             "deathsPerMil": 0,
             "totalTests": 0,
             "testsPerMil": 0,
             "population": 0
         }
 ]
 }

无细节预览

标签： jsonlistviewxamarin.formsitemscontroldetailsview

Answer 1

首先，将ItemTapped处理程序添加到您的ListView

<ListView x:Name="listviewRegions" ItemTapped="RegionTapped" ...

然后在你的代码隐藏中

protected void RegionTapped(object sender, ItemTappedEventArgs e)
{
    // cast the tapped item to the correct type
    var region = (RegionData)e.Item;

    Navigation.PushAsync(new DetailPage(region));
}

为此，您必须NavigtionPage在分配MainPagein时使用App.xaml.cs

MainPage = new NavigationPage(new MainPage());

最后，您需要创建一个新的 XAML 页面DetailPage，该页面接受RegionData构造函数中的参数。然后，您可以使用数据绑定将 XAML 中的 UI 绑定到RegionData实例

public DetailPage(RegionData data) 
{
   InitializeComponent();
 
   this.BindingContext = data;
}