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

【问题标题】：SwiftUI add border to onSelect horizontal Scrollview imageSwiftUI 为 onSelect 水平滚动视图图像添加边框
【发布时间】：2020-12-11 07:23:56
【问题描述】：

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

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

【问题讨论】：

您需要在状态中跟踪选择，查看此主题以获取演示stackoverflow.com/questions/63297201/…。
将你的 VStack 转换成一个独立的视图，然后传递一个可以从父视图读取的绑定。我会尽快发布答案。

标签： swiftui swiftui-scrollview

【解决方案1】：

将您的 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，您可能需要使用边框。祝你好运同志。

【讨论】：