无法从列表视图显示图像

Question

我有一个简单、快速的 UI 购物车应用程序。在主页视图应用程序中。我有产品宽度列表“添加到购物车”按钮。我希望当用户单击购物车按钮时，它应该添加图像、价格、名称等项目属性。当我单击“添加到购物车”按钮时，我只能显示提交的文本，但提交的图像未添加到购物车视图中。

主要问题出在 OrderView 中。.item.thumbnail 未显示图像。

                                Image(item.thumbnail)
                               .resizable()
                               .frame(width: 100, height: 100)
                               .clipShape(Circle())

这是我的订单课程..

import SwiftUI

class Order: ObservableObject {

    @Published var product = [Product]()

    var total: Int {
        if product.count > 0 {
            return product.reduce(0) { $0 + $1.price }
        } else {
            return 0
        }
    }
    func add(item: Product) {
        product.append(item)
    }
    func remove(item: Product) {
        if let index = product.firstIndex(of: item) {
            product.remove(at: index)
        }
    }
}

这是我的主页（产品列表视图）视图..这是主要代码，但如果需要，我可以添加整个代码。

  VStack {   
         if viewModel.productLists.count > 0 && !viewModel.refreshing {
               List(viewModel.productList, id: \.self) { product in
                       ProductListViewCell(productData: product)
    
                        } .listStyle(.grouped)
                     }
                 }
            

这是 ProductListViewCell 代码..

struct ProductListViewCell: View {

    let productData: Product
    @EnvironmentObject var order: Order

    var body: some View {
        HStack {
            if let url = URL(string: productData.thumbnail) {
                ProductAsyncImageView(url: url)
                    .frame(width: 150, height: 150)
                    .mask(RoundedRectangle(cornerRadius: 16))
            }
            VStack(alignment: .leading,spacing: 5) {
                Text("Name: " +  (productData.title))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .font(.headline)

                Text("Description: " + (productData.description))
                    .frame(maxWidth: .infinity, alignment: .leading)


                Text("Price: £" + String(productData.price))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .font(.subheadline)

                Button {
                    order.add(item: productData)

                } label: {
                    HStack {
                        Image(systemName: "cart.badge.plus")

                        Text("Add to Cart")
                            .fontWeight(.semibold)
                    }
                    .foregroundColor(.white)
                    .frame(width: 150 , height: 40)

                }
                .background(Color(.systemBlue))
                .cornerRadius(10)
            }
        }
    }
}

这是订单查看代码..

import SwiftUI

struct OrderView: View {
    @EnvironmentObject var order: Order

    var body: some View {
           NavigationStack {
               List {
                   Section {
                       ForEach(order.product) { item in
                           HStack {
                               Image(item.thumbnail)
                                   .resizable()
                                   .frame(width: 100, height: 100)
                                   .clipShape(Circle())

                               VStack {
                                   Text(item.title)
                                   Text("£\(item.price) | \(item.discountPercentage)")
                                   Button("Show details") {

                                   }.foregroundColor(.gray)
                               }
                           }
                       }
                   }

                   Section {
                       NavigationLink("Place Order") {
                           Text("Check out")
                       }
                   }
               }
               .navigationTitle("Order")
           }
       }
   }

这是产品列表视图的屏幕截图..

这是购物车视图图像未显示的屏幕截图。

Answer 1

item.thumbnail 似乎有问题。这部分可以先调试一下。该图像可以显示在 ProductListViewCell 文件中，但无法显示在 OrderView 文件中。请检查代码并更新。

也许你可以更新 OrderView:

import SwiftUI
struct OrderView: View {
@EnvironmentObject var order: Order
  var body: some View {
    NavigationView {
      List {
        Section {
          ForEach(order.product) { item in
            HStack {
              if let url = URL(string: item.thumbnail) {
                ProductAsyncImageView(url: url)
                  .frame(width: 100, height: 100)
                  .clipShape(Circle())
              }
              VStack(alignment: .leading) {
                Text(item.title)
                  .font(.headline)
                Text("£\(item.price) | \(item.discountPercentage)")
                  .font(.subheadline)
                Button("Show details") {
                  // actions
                }
                .foregroundColor(.gray)
              }
            }
          }
        }
        Section {
          NavigationLink("Place Order") {
            Text("Check out")
          }
        }
      }
      .navigationTitle("Order")
    }
  }
}