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 表单中实现列表视图的分组非常困难。谁能帮我做到这一点？我在这里上传了一个示例项目。

score 5 · Accepted Answer

您可以使用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
    }
}

输出：

score 1 · Accepted Answer

我用静态数据测试了你的演示，你的情况有一些问题。

首先CbrainBibleBooksHB 是ObservableCollection的子类，所以你不需要再设置属性cbrainBibleTOList

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

其次，你设置了错误的标签绑定路径。

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

以下是我的代码，因为我无法访问您的网址，所以我使用了静态数据。

在xml中

...
<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 下载的对象与我的演示具有相同的级别。

score 0 · Accepted Answer

你也可以这样做

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

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

3 回答 3

在xml中

在视图模型中

Related

Reference