更改所选按钮颜色 SwiftUI ForEach 数组答案

【问题标题】：Change Selected Button Color SwiftUI ForEach Array更改所选按钮颜色 SwiftUI ForEach 数组
【发布时间】：2021-02-24 07:55:08
【问题描述】：

我有一个项目数组，我想在点击时更改其前景色。现在使用下面的代码，它们都变成了蓝色。应该怎么修改？

    struct HorizontalCardSelector: View {
    @State var selected = 0
    @State var items: [String] = ["Visa", "MasterCard", "PayPal"]
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 17) {
                ForEach(items, id: \.self) { item in
                    Button(action: {
                        self.selected = items.firstIndex(of: item)!
                        print("item \(item) tapped")
                    }, label: {
                        Text(item)
                            .foregroundColor(self.selected == selected ? .blue: .black)
                            .fontWeight(.semibold)
                    })
                }
            }
        }
        .padding(.vertical)
    }
}

【问题讨论】：

标签： arrays button foreach swiftui

【解决方案1】：

将您的 selected 变量更改为可选字符串。然后，比较当前项是否等于selected 变量。

struct ContentView: View {
    @State var selected : String? // <-- Here
    @State var items: [String] = ["Visa", "MasterCard", "PayPal"]
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 17) {
                ForEach(items, id: \.self) { item in
                    Button(action: {
                        self.selected = item  // <-- Here
                        print("item \(item) tapped")
                    }, label: {
                        Text(item)
                            .foregroundColor(self.selected == item ? .blue: .black)  // <-- Here
                            .fontWeight(.semibold)
                    })
                }
            }
        }
        .padding(.vertical)
    }
}

【讨论】：

嗨，很好的解决方案。请问如何在点击时更改按钮的背景颜色？我们可以使用这个解决方案来选择多个按钮吗？
您可以添加一个背景修饰符，该修饰符使用三元像foregroundColor。对于多项选择，最好开始一个新问题

【解决方案2】：

您可以维护一个boolean 状态数组，它保存items 数组中每个项目的点击状态。然后你可以在true和false之间切换状态。

import SwiftUI

struct HorizontalCardSelector: View {
    @State var selected :[Bool]
    @State var items: [String]
    
    init(item:[String]) {
        _items = State(wrappedValue: item)
        _selected = State(wrappedValue: [Bool](repeating: false, count: item.count))
    }
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 17) {
                ForEach(0..<items.count, id: \.self) { index in
                    Button(action: {
                        if self.selected[index] == true{
                            self.selected[index] = false
                        }else{
                            self.selected[index] = true
                        }
                       
                        print("item \(items[index]) tapped")
                    }, label: {
                        Text(items[index])
                            .foregroundColor(selected[index] ? .blue: .black)
                            .fontWeight(.semibold)
                    })
                }
            }
        }
        .padding(.vertical)
    }
}

@main

struct WaveViewApp: App {
    var body: some Scene {
        WindowGroup {
            HorizontalCardSelector(item: ["Visa", "MasterCard", "PayPal"])
        }
    }
}

Array 初始化取决于您的要求。您也可以从子视图执行。

【讨论】：