SwiftUI 在惰性网格中选择多个项目

Question

对于 SwiftUI，这是我当前的代码：

import SwiftUI

enum Items: String, CaseIterable, Equatable {
    case item1
    case item2
    case item3
    case item4
    case item5
    case item6
}

struct GridPicker: View {
    var rows: [GridItem] = Array(repeating: .init(.flexible()), count: 3)
   


@State var isPressed = false

var body: some View {
    NavigationView {
        ScrollView(.horizontal) {
            LazyHGrid(rows: rows) {
                ForEach(Items.allCases, id: \.self) { value in
                    Button(action: {
                        isPressed = true
                    }, label: {
                        Text(value.rawValue)
                            .tag(value)
                            .foregroundColor(isPressed ? .purple : .white)
                    })
                    
                    .frame(width: 85, height: 85)
                    .background(isPressed ? Color.white : Color.purple)
                    .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                }
            }
        }
    }
    .navigationViewStyle(StackNavigationViewStyle())
    
}
}

struct GridPicker_Previews: PreviewProvider {
    static var previews: some View {
        GridPicker()
    }
}

我正在努力做到这一点，所以我得到如下图所示的结果。

现在我有一个枚举什么情况。我试图使每个案例都可以选择，然后返回用户按下的枚举中的哪些案例，以便我可以将结果保存在核心数据中。请注意，我试图将其保存到的核心数据中的属性是字符串数组。

当前问题：

当我按下列表项之一时，所有项目都会改变颜色（我只希望所选项目改变颜色）

如何获取用户以字符串数组格式按下的枚举中的大小写？

提前致谢。

Answer 1

添加一个新@State数组来保存所选项目。

enum Items: String, CaseIterable, Equatable {
    case item1
    case item2
    case item3
    case item4
    case item5
    case item6
}

struct GridPicker: View {
    var rows: [GridItem] = Array(repeating: .init(.flexible()), count: 3)
    
    @State  var selectedItems: [Items] = []
    
    
    var body: some View {
        NavigationView {
            ScrollView(.horizontal) {
                LazyHGrid(rows: rows) {
                    ForEach(Items.allCases, id: \.self) { item in
                        GridColumn(item: item, items: $selectedItems)
                    }
                }
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
        
    }
}

struct GridPicker_Previews: PreviewProvider {
    static var previews: some View {
        GridPicker()
    }
}


struct GridColumn:View {
    let item: Items
    
    @Binding var items: [Items]
    
    var body: some View {
        Button(action: {
            if items.contains(item) {
                items.removeAll { $0 == item}
            } else {
                items.append(item)
            }
        }, label: {
            Text(item.rawValue)
                .tag(item)
                .foregroundColor(items.contains(item) ? .purple : .white)
        })
        
        .frame(width: 85, height: 85)
        .background(items.contains(item) ? Color.white : Color.purple)
        .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
    }
}

这不是一个字符串数组，而是一个项目数组（枚举）。如果您需要字符串，请使用字符串数组。

您不需要使用isPressed.