单元格 PickerTextField 不可点击
Cell PickerTextField is not tappable
我正在尝试显示一个滚动视图,其中每个单元格都有 3 个选择器文本字段。
但是,只有最后一个单元格具有可点击的工作选择器文本字段。
当我检查 BasketListCell 预览时,它就像我想要的那样。所有的选择器都与占位符配合得很好。但在滚动视图中它没有。
我在 BasketList 中有 3 个不同的 listData,但 ShoppingCartView 重复第一个 3 次。
所以这是我的单元格结构篮子,每个选择器文本字段都有 3 个 Int。
struct Basket: Identifiable {
var id: Int {
return elementID
}
var elementID: Int
var image: String
var title: String
var brand: String
var price: String
var selectionImage: String
var discountedPrice: String
var sizeSelectedIndex: Int?
var colorSelectedIndex: Int?
var itemSelectedIndex : Int?
}
这是我的演示 BasketList,其中包含 3 个元素。
struct BasketList {
static let listData: [Basket] = [
Basket(elementID: 0, image: "Tee", title: "3-Stripes Shirt", brand: "Adidas Original", price: ".40", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 0, image: "Blouse", title: "Tuxedo Blouse", brand: "Lost Ink", price: ".00", selectionImage: "checkmark", discountedPrice: ".90", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 0, image: "Tee", title: "Linear Near Tee", brand: "Converse", price: ".50", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
]
}
那是我的 BasketCell
struct BasketListCell: View {
@State var isSelected: Bool = false
@State private var itemSelectedIndex : Int?
@State private var sizeSelectedIndex : Int?
@State private var colorSelectedIndex: Int?
var colors = ["Black", "Green", "Red", "Blue"]
var sizes = ["XS", "S", "M", "L", "XL", "XXL"]
var items = ["1", "2", "3", "4", "5", "6"]
var item: Basket
var body: some View {
HStack(spacing: 20) {
ZStack {
PickerTextField(data: sizes, placeHolder: "Size", lastSelectedIndex: self.$sizeSelectedIndex)
.overlay(
Image(systemName: "chevron.down")
)
}
.frame(width: UIScreen.main.bounds.width / (375/100), height: 44, alignment: .center)
ZStack{
PickerTextField(data: colors, placeHolder: "Color", lastSelectedIndex: self.$colorSelectedIndex)
.overlay(
Image(systemName: "chevron.down")
)
}
.frame(width: UIScreen.main.bounds.width / (375/100), height: 44, alignment: .center)
ZStack {
PickerTextField(data: items, placeHolder: "Item", lastSelectedIndex: self.$itemSelectedIndex)
.overlay(
Image(systemName: "chevron.down")
)
}
.frame(width: UIScreen.main.bounds.width / (375/100), height: 44, alignment: .center)
}
}
最后,这是我的 ShoppingCartView
struct ShoppingCartView: View {
@State var selectedProduct = Basket(elementID: 0, image: "", title: "", brand: "", price: "", selectionImage: "", discountedPrice: "", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
@State var shown: Bool = false
var body: some View {
ZStack {
Color(.white)
.edgesIgnoringSafeArea(.all)
VStack {
NavigationView {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 20) {
ForEach(BasketList.listData) { item in
BasketListCell(item: item)
.onTapGesture {
self.shown = true
self.selectedProduct = item
}
}
}
}
你多看看这些图片就可以清楚地理解我的问题了。
这是 BasketListCell 预览
那是我的 ShoppingCartView
elementID
模型 class Basket
的属性必须是唯一的。您目前有 3 个 Basket
个对象,它们都具有重复的 identifier
,导致 swiftUI 每次都读取第一个对象。将其更改为一些唯一值应该可以解决问题。
当前-:
struct BasketList {
static let listData: [Basket] = [
Basket(elementID: 0, image: "Tee", title: "3-Stripes Shirt", brand: "Adidas Original", price: ".40", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 0, image: "Blouse", title: "Tuxedo Blouse", brand: "Lost Ink", price: ".00", selectionImage: "checkmark", discountedPrice: ".90", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 0, image: "Tee", title: "Linear Near Tee", brand: "Converse", price: ".50", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
]
}
修复-:
struct BasketList {
static let listData: [Basket] = [
Basket(elementID: 1, image: "Tee", title: "3-Stripes Shirt", brand: "Adidas Original", price: ".40", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 2, image: "Blouse", title: "Tuxedo Blouse", brand: "Lost Ink", price: ".00", selectionImage: "checkmark", discountedPrice: ".90", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 3, image: "Tee", title: "Linear Near Tee", brand: "Converse", price: ".50", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
]
}
我正在尝试显示一个滚动视图,其中每个单元格都有 3 个选择器文本字段。 但是,只有最后一个单元格具有可点击的工作选择器文本字段。
当我检查 BasketListCell 预览时,它就像我想要的那样。所有的选择器都与占位符配合得很好。但在滚动视图中它没有。
我在 BasketList 中有 3 个不同的 listData,但 ShoppingCartView 重复第一个 3 次。
所以这是我的单元格结构篮子,每个选择器文本字段都有 3 个 Int。
struct Basket: Identifiable {
var id: Int {
return elementID
}
var elementID: Int
var image: String
var title: String
var brand: String
var price: String
var selectionImage: String
var discountedPrice: String
var sizeSelectedIndex: Int?
var colorSelectedIndex: Int?
var itemSelectedIndex : Int?
}
这是我的演示 BasketList,其中包含 3 个元素。
struct BasketList {
static let listData: [Basket] = [
Basket(elementID: 0, image: "Tee", title: "3-Stripes Shirt", brand: "Adidas Original", price: ".40", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 0, image: "Blouse", title: "Tuxedo Blouse", brand: "Lost Ink", price: ".00", selectionImage: "checkmark", discountedPrice: ".90", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 0, image: "Tee", title: "Linear Near Tee", brand: "Converse", price: ".50", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
]
}
那是我的 BasketCell
struct BasketListCell: View {
@State var isSelected: Bool = false
@State private var itemSelectedIndex : Int?
@State private var sizeSelectedIndex : Int?
@State private var colorSelectedIndex: Int?
var colors = ["Black", "Green", "Red", "Blue"]
var sizes = ["XS", "S", "M", "L", "XL", "XXL"]
var items = ["1", "2", "3", "4", "5", "6"]
var item: Basket
var body: some View {
HStack(spacing: 20) {
ZStack {
PickerTextField(data: sizes, placeHolder: "Size", lastSelectedIndex: self.$sizeSelectedIndex)
.overlay(
Image(systemName: "chevron.down")
)
}
.frame(width: UIScreen.main.bounds.width / (375/100), height: 44, alignment: .center)
ZStack{
PickerTextField(data: colors, placeHolder: "Color", lastSelectedIndex: self.$colorSelectedIndex)
.overlay(
Image(systemName: "chevron.down")
)
}
.frame(width: UIScreen.main.bounds.width / (375/100), height: 44, alignment: .center)
ZStack {
PickerTextField(data: items, placeHolder: "Item", lastSelectedIndex: self.$itemSelectedIndex)
.overlay(
Image(systemName: "chevron.down")
)
}
.frame(width: UIScreen.main.bounds.width / (375/100), height: 44, alignment: .center)
}
}
最后,这是我的 ShoppingCartView
struct ShoppingCartView: View {
@State var selectedProduct = Basket(elementID: 0, image: "", title: "", brand: "", price: "", selectionImage: "", discountedPrice: "", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
@State var shown: Bool = false
var body: some View {
ZStack {
Color(.white)
.edgesIgnoringSafeArea(.all)
VStack {
NavigationView {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 20) {
ForEach(BasketList.listData) { item in
BasketListCell(item: item)
.onTapGesture {
self.shown = true
self.selectedProduct = item
}
}
}
}
你多看看这些图片就可以清楚地理解我的问题了。
这是 BasketListCell 预览
那是我的 ShoppingCartView
elementID
模型 class Basket
的属性必须是唯一的。您目前有 3 个 Basket
个对象,它们都具有重复的 identifier
,导致 swiftUI 每次都读取第一个对象。将其更改为一些唯一值应该可以解决问题。
当前-:
struct BasketList {
static let listData: [Basket] = [
Basket(elementID: 0, image: "Tee", title: "3-Stripes Shirt", brand: "Adidas Original", price: ".40", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 0, image: "Blouse", title: "Tuxedo Blouse", brand: "Lost Ink", price: ".00", selectionImage: "checkmark", discountedPrice: ".90", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 0, image: "Tee", title: "Linear Near Tee", brand: "Converse", price: ".50", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
]
}
修复-:
struct BasketList {
static let listData: [Basket] = [
Basket(elementID: 1, image: "Tee", title: "3-Stripes Shirt", brand: "Adidas Original", price: ".40", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 2, image: "Blouse", title: "Tuxedo Blouse", brand: "Lost Ink", price: ".00", selectionImage: "checkmark", discountedPrice: ".90", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0),
Basket(elementID: 3, image: "Tee", title: "Linear Near Tee", brand: "Converse", price: ".50", selectionImage: "checkmark", discountedPrice: ".99", sizeSelectedIndex: 0, colorSelectedIndex: 0, itemSelectedIndex: 0)
]
}