多选和自定义项目网格 SwiftUI

Question

大家好我尝试在 SwiftUI 中创建一个可选项目，如下图所示，但是当我触摸每个项目更改颜色和颜色字体，然后将此项目添加到新状态时，我不知道该怎么做，那将是一个列表，这是我的代码，我正在使用一个库来组织这些项目。

这是我的商品代码

import SwiftUI

struct SportItem: View {
    
    @EnvironmentObject var modelData: ModelData
    var sport: Sport
    var backgroundColor: Color = Color(red: 103, green: 80, blue: 164)
    
    var body: some View {
        HStack{
            Text(sport.emoji)
            Text("  "+sport.name)
                .bold()
        }.font(.system(size: 14))
        .padding(8)
//        .background(backgroundColor)
        .background(Color(red: 0.403921568627451, green: 0.3137254901960784, blue: 0.6431372549019608))
        .foregroundColor(.white)
        .cornerRadius(15)
        .shadow(color: Color.black, radius: 3)
        
    }
}

struct SportItem_Previews: PreviewProvider {
    
    static var modelData = ModelData()
    
    static var previews: some View {
        SportItem(sport: modelData.sports[6])
            .environmentObject(modelData)
        
    }
}

我尝试创建一个网格，目标是这个文件创建一个可以选择我想要的运动的状态变量

import SwiftUI
import WrappingStack

struct SelectSport: View {
    
    var event: Event
    
    @State private var eventForm = Event(id: Int(), name: "", place: "", description: "",date: Date(), beginTime: 1, endTime: 2, img: "", sports: Set<Sport>())
    
    
    
    @State var selectedSports: Set<Sport> =  Set<Sport>()
    
    @EnvironmentObject var modelData: ModelData
    var sportsList: [Sport] { modelData.sports }
    
    
    var body: some View {
        VStack{
            Text("Which sports do you want to include?")
            Text(event.name)
            WrappingHStack {
                ForEach(sportsList){
                    sport in
                    SportItem(sport: sport)
                        .padding(4)
                }
            }
            
        }
        .navigationTitle("Select Sports")
        .navigationBarItems(trailing:
                                NavigationLink(destination:DatePickerEvent(event: Event(id: 1, name: "", place: "", description: "", date: Date(), beginTime: 1, endTime: 1, img: "", sports: Set<Sport>() ))){
                Text("Next")
            }
        )
    }
}

struct SelectSport_Previews: PreviewProvider {
    static var previews: some View {
        SelectSport(event: Event(id: 1, name: "", place: "", description: "",date: Date(), beginTime: 1, endTime: 2, img: "", sports: Set<Sport>()))
            .environmentObject(ModelData())
    }
}

Answer 1

首先，为

isSelected

添加一个

SportItem

属性，并根据

isSelected

改变绘制项目的方式。例如：

struct SportItem: View {
    
    @EnvironmentObject var modelData: ModelData
    var sport: Sport
    var isSelected: Bool // <— ADD THIS

    // CHANGE THIS
    var backgroundColor: Color {
        if isSelected { return Color.red }
        else { return Color(red: 0.403921568627451, green: 0.3137254901960784, blue: 0.6431372549019608) }
    }

    var body: some View {
        HStack{
            Text(sport.emoji)
            Text("  "+sport.name)
                .bold()
        }.font(.system(size: 14))
        .padding(8)
        .background(backgroundColor) // <- CHANGE THIS
        .foregroundColor(.white)
        .cornerRadius(15)
        .shadow(color: Color.black, radius: 3)
        
    }
}

然后，在

SelectSport

中，做两个改变：

1. 将

   isSelected

   属性传递给

   SportItem

   。传递的值取决于

   selectedSports

   是否包含

   sport

   .

2. 在

   .onTapGesture

   之后添加一个

   SportItem

   修饰符来切换

   selectedSports

   是否包含

   sport

   .

例如：

SportItem(sport: sport, isSelected: selectedSports.contains(sport))
    .onTapGesture {
        selectedSports.formSymmetricDifference([sport])
    }
    .padding(4)