使用 Xamarin 表单选择产品时如何显示产品详细信息

Posted 2023-04-13

【中文标题】使用 Xamarin 表单选择产品时如何显示产品详细信息

【英文标题】：How To Display Product Details When Selecting A Product using Xamarin Forms

【发布时间】：2020-11-03 06:09:02

【问题描述】：

我目前正在使用 Xamarin Forms 构建一个移动应用程序，这是我第一次这样做。

它基本上是一个电子商务购物车，我使用 REST API 提取数据，它显示产品列表，然后用户可以添加到购物车。

当用户单击列表中的产品时，我需要以最佳方式显示单个产品详细信息的帮助。

例如，当我点击产品类别时，它会显示产品列表。

当我选择产品时，如何在另一个页面上显示单个产品的详细信息？

任何帮助将不胜感激！

这是我的 productpage.xaml，它正确显示所有产品。

<ListView x:Name="productsListView"
                      HasUnevenRows="True"                       
                        VerticalOptions="FillAndExpand"
                      SeparatorVisibility="None"
                      ItemSelected="OnItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                                <Frame HasShadow="True" Padding="20" Margin="20">
                                    <StackLayout>
                                        <Image Source="Binding featured_src"/>
                                        <Label Text="Binding title" FontSize="Medium"/>
                                        <Frame BackgroundColor="Red" Padding="5" HorizontalOptions="Center" WidthRequest="80" HeightRequest="20" CornerRadius="00">
                                            <Label WidthRequest="40" Text="Binding price , StringFormat='$0'" TextColor="White" HorizontalTextAlignment="Center"></Label>
                                        </Frame>

                                    </StackLayout>
                                </Frame>
                        
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

我只需要弄清楚如何展示单个产品。

【问题讨论】：

创建产品详情页面？无论如何，您并没有真正提出问题，您没有编程问题atm，只是一个小型研究问题。请尝试一些事情，如果您遇到问题，请发布更详细的帖子，说明您正在尝试的内容和无效的内容

就像@TheGeneral 说的那样，您通常会为 ProductDetail 创建第二个页面，当他们单击产品时，您将导航到该页面，传递产品 ID 或对象，详细信息页面将用于填充其 UI。 Xamarin 提供了许多示例，您可以查看这些示例。

【参考方案1】：

我如何在另一个页面上显示单个产品的详细信息？ 选择产品？

首先，您的应用应以 NavigationPage: 开头：

public App()

    InitializeComponent();

    MainPage = new NavigationPage(new MainPage());

您可以推送到带有特定产品dataModel的另一个页面，以在OnItemSelected方法中显示所选产品的详细信息：

private void OnItemSelected(object sender, SelectedItemChangedEventArgs e)


    dataModel selectedProductModel = e.SelectedItem as dataModel;

    Navigation.PushAsync(new ProductDetail(selectedProductModel));

您应该有一个ProductDetail 页面来显示详细信息：

public partial class ProductDetail : ContentPage

    public ProductDetail()
    
        InitializeComponent();
    

    public ProductDetail(dataModel model)
    
        InitializeComponent();

        //get the produce info from model and show it in this page
    

【讨论】：

非常感谢杰克！它的工作！ :D 继续努力！