首页 > 解决方案 > Xamarin 表单中的多个列表数据检索

问题描述

    Person |     fruits         |  vegetables
______________________________________________
    P1     |    Apple Banana    |  tomato, spinach
    P2     |    Orange Apple    |  Onion, Garlic

我正在学习一些概念。我有上述格式的数据。有人可以建议在这种情况下我可以使用哪种数据结构来检索数据。还有人可以告诉我如何在滚动视图中有多个列表吗?我可以通过在 app.xaml 中定义设计(用于水果、蔬菜列表)来使用通用模板吗?如何使用从上表中检索到的数据填充到我的 ScrollViewList 中?

我的滚动视图应如下所示: 预期格式

标签: c#xamarinxamarin.formsxamarin.android

解决方案


数据结构

public class Goods
{
    public string Name { get; set; }
}

public class GoodsList : List<Goods>
{
    public string Name { get; set; }
    public List<Goods> GoodsAll => this;
}


public class Person
{
    public string Name { get; set; }
    public List<GoodsList> List;
}

您需要两个页面,分别称为PersonPageGoodsPage

个人页面

  //Xaml
 <ListView ItemsSource="{Binding list}" ItemSelected="ListView_ItemSelected">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Name}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
 </ListView>

//Code
public partial class Page1 : ContentPage
{
    public List<Person> list { get; set; }

    public Page1()
    {
        InitializeComponent();

        var list1 = new GoodsList() { new Goods { Name = "Apple" } , new Goods { Name = "Banana" } };
        list1.Name = "Fruits";

        var list2 = new GoodsList() { new Goods { Name = "Tomato" }, new Goods { Name = "Spinach" } };
        list2.Name = "Vegetables";

        var list3 = new GoodsList() { new Goods { Name = "Apple" }, new Goods { Name = "Orange" } };
        list3.Name = "Fruits";

        var list4 = new GoodsList() { new Goods { Name = "Onion" }, new Goods { Name = "Garlic" } };
        list4.Name = "Vegetables";



        list = new List<Person>();
        list.Add(new Person
        {
            Name = "P1",
            List = new List<GoodsList>() { list1,list2}
        }) ;
        list.Add(new Person
        {
            Name = "P2",
            List = new List<GoodsList>() { list3, list4}
        });

        this.BindingContext = this;
    }

    private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        this.Navigation.PushAsync(new Page2(e.SelectedItem), true) ;
    }
}

商品页面

 //Xaml
 <ListView x:Name="listview" IsGroupingEnabled="true">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Label BackgroundColor="Pink"
                       HorizontalOptions="FillAndExpand"
                       Text="{Binding Name}" />
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label HorizontalTextAlignment="Center"
                       FontSize="Large" 
                       HorizontalOptions="FillAndExpand" 
                       Text="{Binding Name}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

//Code
public partial class Page2 : ContentPage
{
    public Page2(object obj)
    {
        InitializeComponent();
        var person = obj as Person;

        listview.ItemsSource = person.List;
    }
}

在此处输入图像描述


推荐阅读