我有一个简单的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")
}
}
}
型
下面是产品列表视图的屏幕截图。
的数据
以下是未显示的购物车视图图像的屏幕截图。
图像底部边缘不正确
1条答案
按热度按时间qpgpyjmq1#
item.thumbnail似乎有问题,可以先调试这部分,图片可以显示在ProductListViewCell文件中,但不能显示在OrderView文件中,请检查代码并更新pls。
您可以更新OrderView:
字符串