SwiftUI 更改滚动视图内按钮的背景颜色答案

【问题标题】：SwiftUI change background color of a button inside a scrollviewSwiftUI 更改滚动视图内按钮的背景颜色
【发布时间】：2020-05-15 23:58:48
【问题描述】：

我正在尝试根据 isSelected 状态更改按钮的颜色但不起作用

struct Box: Identifiable  {
    var id: Int
    var title: String
    @State var isSelected: Bool
}

struct BoxView: View {
    var box: Box
    var body: some View{
        Button(action: {
            self.box.isSelected.toggle()
        }){
            Text(box.title)
                .foregroundColor(.white)
        }
    .frame(width: 130, height: 50)
        .background(self.box.isSelected ? Color.red : Color.blue)
    .cornerRadius(25)
    .shadow(radius: 10)
    .padding(10)

    }
}

【问题讨论】：

标签： ios swift xcode scrollview swiftui

【解决方案1】：

试试这个方法。

struct Box: Identifiable  {
    var id: Int
    var title: String
}

struct BoxView: View {

    var box: Box

    @State var selectedBtn: Int = 1

    var body: some View {
        ForEach((1...10).reversed(), id: \.self) { item in
            Button(action: {
                self.selectedBtn = item
            }){
                Text(self.box.title)
                    .foregroundColor(.white)
            }
            .frame(width: 130, height: 50)
            .background(self.selectedBtn == item ? Color.red : Color.blue)
            .cornerRadius(25)
            .shadow(radius: 10)
            .padding(10)
        }
    }
}

【讨论】：

非常感谢它的工作，但你知道如果选择一个它会使其他按钮变为假，就像只有一个可以是真的
这取决于您将如何呈现多个按钮。通过使用 list 或 forEach 循环？请提供多个按钮的代码。
我正在使用 foreach

【解决方案2】：

你也可以像这样观察值的变化。

class Box: ObservableObject {
    let objectWillChange = ObservableObjectPublisher()
    var isSelected = false { willSet { objectWillChange.send() } }
}

    struct ContentView: View {
    @ObservedObject var box = Box()
    var body: some View {
        VStack{
            Button(action: {
                self.box.isSelected.toggle()
            }){
                Text("tap")
                    .foregroundColor(.white)
            }
            .background(box.isSelected ?? false ? Color.red : Color.blue)
            .cornerRadius(25)
            .shadow(radius: 10)
            .padding(10)
        }
    }
}

【讨论】：

【解决方案3】：

您可以使用以下代码在点击时更改Button 背景Color

struct ContentView: View {

    @State var isSelected : Bool = false
    var body: some View {

        VStack {
            Button(action: {
                self.isSelected.toggle()
            }){
                Text("State")
                    .foregroundColor(.white)
            }
            .frame(width: 130, height: 50)
            .background(self.isSelected ? Color.red : Color.blue)
        }
    }
}

【讨论】：