SwiftUI为onSelect水平滚动视图图像添加边框

Question

我试图制作一个包含项目列表的水平滚动视图。当我点击任何一个项目时，它会在项目后面显示一个边框(高亮显示(。当我按下另一个项目时，上一个边框消失，最近单击的项目显示为边框。它只是看起来像一个选择水平滚动视图。我不知道该怎么做。

ScrollView(.horizontal, showsIndicators: false){
LazyHStack{
ForEach(self.staffs.indices, id: .self){ staff in
VStack{
Image(staff.image)
.resizable()
.frame(width: 100, height: 100)
.clipShape(Circle())
}
.onTapGesture {
print(createBookingJSON.staffs[staff].staffID!)
}
}
}
}

Answer 1

将VStack转换为独立视图，然后向其传递可以从父视图读取的绑定。您的新VStack独立视图需要一个OnTapGesture或一个通过按钮切换其状态的Action。我们将使您的ForEach成为"；"单选"；根据您的要求列出。

在ForEach中使用的新视图：

struct ItemCell: View {
var item: Item
@Binding var selectedItem: Item?
var body: some View {
VStack{
Image(item.image)
.resizable()
.frame(width: 100, height: 100)
.border(Color.green, width: (item == selectedItem) ? 20 : 0)
}
.onTapGesture {
self.selectedItem = item
print(createBookingJSON.staffs[staff].staffID!)
}
}
}

现在，在包含Foreach的视图中，添加selectedItem的State Var，这样您就可以读取在单元格中创建的Binding。并用新的ItemCell:替换您的VStack

struct YourParentView: View {
@State var selectedItem: Item? = nil

var body: some View {
ScrollView(.horizontal, showsIndicators: false){
LazyHStack{
ForEach(self.staffs.indices, id: .self){ staff in
ItemCell(item: staff, selectedItem: self.$selectedItem)
}
}
}
}
}

现在，当您单击项目时，应该会出现一个边框。您可能需要根据您的设计和Circle((的clipShape来处理边框。祝你好运，同志。