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

Posted 2023-02-24

【中文标题】更改所选按钮颜色 SwiftUI ForEach 数组

【英文标题】：Change Selected Button Color SwiftUI ForEach Array

【发布时间】：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)
    

【参考方案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 初始化取决于您的要求。您也可以从子视图执行。