xamarin.forms - Xamarin 表单：Listview 分组问题

Question

我正在尝试为我的以下 JSON 数据实现列表视图分组。

JSON 示例：

{ 
   "cbrainBibleBooksHB":[ { 
        "book":"2 John",
         "cbrainBibleTOList":[ 
            { 
               "bookName":"2 John",
               "chapter":"1",
               "pageUrl":"/edu-bible/9005/1/2-john-1"
            },
            {....}
         ]
      },
      { 
         "book":"3 John",
         "cbrainBibleTOList":[ 
            {  
               "bookName":"3 John",
               "chapter":"1",
               "pageUrl":"/edu-bible/9007/1/3-john-1"
            },
            {...}
         ]
      }
   ]
 }

我正在尝试按其书名对 JSON 数据进行分组。

我尝试如下：

模型：

public class BibleTestament
    {
        public List<CbrainBibleBooksHB> cbrainBibleBooksHB { get; set; }
    }

    public class CbrainBibleBooksHB : ObservableCollection<CbrainBibleTOList>
    {
        public string book { get; set; }
        public List<CbrainBibleTOList> cbrainBibleTOList { get; set; }
    }

    public class CbrainBibleTOList
    {
        public string chapter { get; set; }
        public string pageUrl { get; set; }
        public string bookName { get; set; }
    }

视图模型

HttpClient client = new HttpClient();
                var Response = await client.GetAsync("rest api");
                if (Response.IsSuccessStatusCode)
                {
                    string response = await Response.Content.ReadAsStringAsync();
                    Debug.WriteLine("response:>>" + response);
                    BibleTestament bibleTestament = new BibleTestament();
                    if (response != "")
                    {
                        bibleTestament = JsonConvert.DeserializeObject<BibleTestament>(response.ToString());
                    }
                    AllItems = new ObservableCollection<CbrainBibleBooksHB>(bibleTestament.cbrainBibleBooksHB);

XAML

<ContentPage.Content>
        <StackLayout>
            <ListView 
                HasUnevenRows="True"
                ItemsSource="{Binding AllItems,Mode=TwoWay}"
                IsGroupingEnabled="True">
                <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Label 
                                Text="{Binding book}"
                                Font="Bold,20" 
                                HorizontalOptions="CenterAndExpand"
                                HorizontalTextAlignment="Center"
                                VerticalTextAlignment="Center"
                                Margin="3"
                                TextColor="Black"
                                VerticalOptions="Center"/>
                        </ViewCell>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <StackLayout
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="FillAndExpand"
                                    Orientation="Horizontal">

                                    <Label 
                                        Text="{Binding cbrainBibleTOList.chapter}"
                                        Font="20" 
                                        HorizontalTextAlignment="Center"
                                        VerticalTextAlignment="Center"
                                        HorizontalOptions="CenterAndExpand"
                                        TextColor="Black"
                                        VerticalOptions="Center"/>
                                </StackLayout>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Footer>
                    <Label/>
                </ListView.Footer>
            </ListView>
        </StackLayout>
    </ContentPage.Content>

但是在运行项目时，UI 上没有显示任何数据。Binding: 'book' property not found on 'System.Object[]', target property: 'Xamarin.Forms.Label.Text'在输出框中获取消息。在 xamarin 表单中实现列表视图的分组非常困难。谁能帮我做到这一点？我在这里上传了一个示例项目。

标签： xamarin.formslistviewgroup

Answer 1

您可以使用Xamarin.Forms 版本 >=3.5的最新BindableLayout ，而不是使用分组的 Listview，而且工作量更少。

更新您的模型类

public class CbrainBibleBooksHB
{
   public string book { get; set; }
   public List<CbrainBibleTOList> cbrainBibleTOList { get; set; }
}

XAML：

<ScrollView>
    <FlexLayout
        BindableLayout.ItemsSource="{Binding AllItems}"
        Direction="Column"
        AlignContent="Start">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0"
                            Text="{Binding book}"
                            HorizontalOptions="FillAndExpand"
                            BackgroundColor="LightBlue"/>
                    <StackLayout Grid.Row="1"
                                    BindableLayout.ItemsSource="{Binding cbrainBibleTOList}">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <Label Text="{Binding chapter}">
                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding BindingContext.TapCommand, Source={x:Reference Name=ParentContentPage}}" CommandParameter="{Binding .}"/>
                                    </Label.GestureRecognizers>
                                </Label>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </StackLayout>
                </Grid>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </FlexLayout>
</ScrollView>

注意：这里ParentContentPage是 x:Name 父内容页面的名称，用于给命令提供参考。

视图模型：

class BibleTestamentViewModel : INotifyPropertyChanged
{
    public ICommand TapCommand { get; private set; }

    public BibleTestamentViewModel()
    {
        TapCommand = new Command(ChapterClickedClicked);
    }

    private void ChapterClickedClicked(object sender)
    {
        //check value inside sender
    }
}

输出：