swift 无法从列表视图显示图像

f1tvaqid  于 2023-11-16  发布在  Swift
关注(0)|答案(1)|浏览(141)

我有一个简单的SwiftUI购物车应用程序。在主视图应用程序。我有产品宽度列表添加到购物车按钮。我期待当用户点击购物车按钮时,它应该添加像图像,价格,名称等项目属性。我只能显示文本字段,但图像字段不添加到购物车视图,当我点击添加到购物车按钮。

主要问题是在这里进入OrderView。项目.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")
        }
    }
}


下面是产品列表视图的屏幕截图。


的数据
以下是未显示的购物车视图图像的屏幕截图。

图像底部边缘不正确

qpgpyjmq

qpgpyjmq1#

item.thumbnail似乎有问题,可以先调试这部分,图片可以显示在ProductListViewCell文件中,但不能显示在OrderView文件中,请检查代码并更新pls。
您可以更新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")
    }
  }
}

字符串

相关问题