Question

我需要开发一个显示所有产品及其选项的代码，以便最终可以使用滑块对其进行检查，以便稍后进行价格计算。

MainPage的代码，其中包含一些要测试的伪数据

 public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            List<Product> products = new List<Product>();

            var stronaInternetowa = new Product("Webpage", 100f, new ProductOption("Option1", 10f));
            var sklepInternetowy = new Product("Shop", 100f, new ProductOption("Option1", 10f));

            products.Add(stronaInternetowa);
            products.Add(sklepInternetowy);

            listView.ItemsSource = products;

        }
    }

ProductOption类，用于存储有关Product选项的数据。

 class ProductOption
    {
        public string OptionName { get; private set; }
        public float OptionPrice { get; private set; }

        public ProductOption(string name, float price)
        {
            OptionName = name;
            OptionPrice = price;

        }

    }

MainPage的XAML以及我想要获取的ListView示例

 <ListView x:Name="listView" RowHeight="100">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding Name}"></Label>
                            <!-- Here i would like to display all of the ProductOptions in the list along with Sliders -->
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

产品类。

 class Product 
    {


        public string Name { get; set; }
        public float Price { get; set; }



        public List<ProductOption> ProductOptions { get; private set; } = new List<ProductOption>();

        public Product(string name, float price,params ProductOption[] productOption)
        {
            Name = name;
            Price = price;              
            foreach(ProductOption p in productOption)
            {
                ProductOptions.Add(p);
            }
        }
    }

到目前为止，我已经尝试过：

分组，对我来说真的不像我尝试的那样。
嵌套ListView，但不支持。

Answer 1

您可以进行一些更改以启用分组：

XAML应该是：

list

产品型号应为：

请注意，我使用title_id继承了User.update( {"lists.title_id": listTitleId}, {$pullAll: {"lists.$.items": items}}, {multi: true}, (err, users) => {} );

<ListView 
    x:Name="listView"
    IsGroupingEnabled="True"        
    HasUnevenRows="True">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell Height="45">
                <Grid Padding="10" BackgroundColor="WhiteSmoke">
                    <Label FontSize="18">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding Name}"/>
                                <Span Text=",  "/>
                                <Span Text="{Binding Price}"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell Height="40">
                <Grid Padding="10" BackgroundColor="White">
                    <Label FontSize="15">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding OptionName}"/>
                                <Span Text=",  "/>
                                <Span Text="{Binding OptionPrice}"/>
                            </FormattedString>
                        </Label.FormattedText>
                     </Label>
                 </Grid>
            </ViewCell>
        </DataTemplate>
     </ListView.ItemTemplate>
</ListView>

当我尝试以下数据时：

Product

我得到以下结果：

如何在ListView中显示嵌套列表？

1 个答案: