Xamarin forms：列表視圖分組問題

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 數據進行分組。

我嘗試如下：

Model：

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'消息在 Z78E6221F6393D1356681ZCED398 上在 xamarin forms 中為列表視圖實現分組非常困難。 誰能幫我做到這一點？ 我在這里上傳了一個示例項目。

Answer 1

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

更新您的Model class

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
    }
}

Output：

Answer 2

我使用 static 數據測試了您的演示，您的情況存在一些問題。

首先CbrainBibleBooksHB是ObservableCollection的子類，所以你不需要再設置屬性cbrainBibleTOList

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

其次，你設置了錯誤的label的綁定路徑。

<Label 
   Text="{Binding chapter}"
   ...
   />

以下是我的代碼，因為我無法訪問您的 url，所以我使用了 static 數據。

在 xaml

...
<Label 
   Text="{Binding chapter}"
   HeightRequest="30"
   Font="20" 
   HorizontalTextAlignment="Center"
   VerticalTextAlignment="Center"
   HorizontalOptions="CenterAndExpand"
   TextColor="Black"
   VerticalOptions="Center"/>
...

在視圖模型中

namespace TestamentSample
{
    public class BibleTestamentViewModel 
    {


        public ObservableCollection<CbrainBibleBooksHB> AllItems
        {
            get;set;
        }

        public BibleTestamentViewModel()
        {


            var cbrainBibleBooksHB = new CbrainBibleBooksHB() {book = "group1",};

            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "1111" });
            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "2222" });
            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "3333" });
            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "4444" });
            cbrainBibleBooksHB.Add(new CbrainBibleTOList() { chapter = "5555" });


            var cbrainBibleBooksHB2 = new CbrainBibleBooksHB() { book = "group2", };

            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "6666" });
            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "7777" });
            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "8888" });
            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "9999" });
            cbrainBibleBooksHB2.Add(new CbrainBibleTOList() { chapter = "0000" });

            AllItems = new ObservableCollection<CbrainBibleBooksHB>() {
                cbrainBibleBooksHB,cbrainBibleBooksHB2
            };
        }

    }
}

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

您應該確保您從遠程 url 下載的 object 與我的演示具有相同的級別。

Answer 3

你也可以這樣做

 <ListView ItemsSource="{Binding Itens}" SeparatorColor="#010d47"  RowHeight="120" x:Name="lvEmpresaPending" SelectionMode="None">
                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <ViewCell>
                                                    <StackLayout>
                                                        <StackLayout Orientation="Horizontal">
                                                            <Label Text="Nome da Empresa:" FontAttributes="Bold" ></Label>
                                                            <Label Text="{Binding Main.Nome}"></Label>
                                                        </StackLayout>
                                                        <StackLayout Orientation="Horizontal">
                                                            <Label Text="CNPJ da Empresa:" FontAttributes="Bold"></Label>
                                                            <Label Text="{Binding Main.Cnpj}"></Label>
                                                        </StackLayout>
                                                        <StackLayout Orientation="Horizontal">
                                                            <Label Text="Cargo: " FontAttributes="Bold"></Label>
                                                            <Label Text="{Binding Cargo}"></Label>
                                                        </StackLayout>
                                                        <StackLayout Orientation="Horizontal">
                                                            <Label Text="Inicio" FontAttributes="Bold"></Label>
                                                            <Label Text="{Binding DataInicio}"></Label>
                                                            <Label Text="Término" FontAttributes="Bold"></Label>
                                                            <Label Text="{Binding DataFim}"></Label>

                                                        </StackLayout>

                                                    </StackLayout>
                                                </ViewCell>
                                            </DataTemplate>



public class ModelosPPP
    {
        public Empresa Main { get; set; }
        public string DataInicio { get; set; }
        public string DataFim { get; set; }
        public string Cargo { get; set; }
        public string Status { get; set; }
    }


 public class Empresa
    {
        public string Nome { get; set; }
        public string Cnpj { get; set; }
    }