1

我试图制作一个包含项目列表的水平滚动视图。当我单击任何项​​目时，它会在项目后面显示一个边框（突出显示）。当我按下另一个项目时，前一个边框消失，最后点击的项目出现边框。它看起来就像一个选择水平滚动视图。我不知道该怎么做。

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!)
           }
        }
     }
}
4

1 回答 1

2

将您的 VStack 转换为独立视图，然后向其传递可以从父视图读取的绑定。您的新 VStack 独立视图需要一个 OnTapGesture 或一个通过按钮的操作来切换其状态。我们将根据您的要求将您的 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，您可能需要使用边框。祝同志好运。

于 2020-12-11T08:02:39.867 回答