垫片破坏按钮外观，按钮仍然切换

如何解决垫片破坏按钮外观，按钮仍然切换

我创建了一个HStack，其中包含按钮的集合，这些按钮在被选中和取消选中时会改变外观。一次只能选择一个按钮。在项目之间添加Spacer（）时，按钮切换起作用，但是即使选择的索引按预期变化，外观也不会改变。

struct GenericFilterButton: View {
    var category: String
    var textColor: Color
    var buttonColor: Color
    var body: some View {
        Text(category)
            .font(.custom("Avenir Heavy",size: 14))
            .foregroundColor(textColor)
            .padding(.vertical,10)
            .padding(.horizontal,14)
            .background(buttonColor)
            .cornerRadius(50)
            .lineLimit(1)
    }
}

struct FilterViewCompletionPercent: View {
    var completionPercent = ["Any","25%","50%","75%","100%"]
    @State var percentSelected = 0
    var body: some View {
        vstack(alignment: .leading,spacing: 0) {
            Text("Completion")
                .font(.custom("Avenir Heavy",size: 18))
                .foregroundColor(Color.black.opacity(0.5))
                .padding(.bottom,20)
            HStack(alignment: .center) {
                ForEach(0..<completionPercent.count) { i in
                    Button(action: {
                        self.percentSelected = i
                        print(self.percentSelected)
                    }) {
                        GenericFilterButton(category: self.completionPercent[i],textColor: self.percentSelected == i ? Color.white : Color.black.opacity(0.5),buttonColor: self.percentSelected == i ? Color.blue : Color.white.opacity(0.0))
                    }
                    if i != 4 {
                        Spacer()
                    }
                }
            }.padding(.bottom,20)
            Divider()
                .background(Color.black.opacity(0.1))
        }.padding(.horizontal,25)
            .padding(.top,30)
    }
}

为什么会这样？我似乎想不出为什么在项目之间添加Spacer（）不起作用的合理原因，但是在没有if语句的情况下添加Spacer（）的情况。

解决方法

ForEach的动态内容应该为单一视图，因此将Button-Spacer对嵌入到另一个HStack中。

通过Xcode 11.4 / iOS 13.4测试

HStack(alignment: .center) {
    ForEach(0..<completionPercent.count,id: \.self) { i in
        HStack {                       // << this one !!
            Button(action: {
                self.percentSelected = i
                print(self.percentSelected)
            }) {
                GenericFilterButton(category: self.completionPercent[i],textColor: self.percentSelected == i ? Color.white : Color.black.opacity(0.5),buttonColor: self.percentSelected == i ? Color.blue : Color.white.opacity(0.0))
            }
            if i != 4 {
                Spacer()
            }
        }
    }
}.padding(.bottom,20)