在 SwiftUI 中点击更改按钮背景颜色

Posted 2023-02-24

【中文标题】在 SwiftUI 中点击更改按钮背景颜色

【英文标题】：Change button background colour on tap in SwiftUI

【发布时间】：2019-09-05 04:36:19

【问题描述】：

我正在尝试在 SwiftUI 中更改我的 Button 的颜色。 这是我的整个 CustomButton 视图结构：

struct CustomButton: View 

    @State private var didTap:Bool = false

    var body: some View 
        Button(action: 
            self.didTap = true
        ) 

        Text("My custom button")
            .font(.system(size: 24))
        
        .frame(width: 300, height: 75, alignment: .center)
        .padding(.all, 20)
        .background(Color.yellow)

        //My code above this comment works fine

        //I tried something like this, but it is not working
     //   if didTap == true 
     //   .background(Color.blue)
     //    

    

这就是我的按钮的样子（很好）：

但我的问题是：如何在用户点击此按钮时更改背景颜色。

谢谢。

【参考方案1】：

为此，您需要根据更改的状态指定颜色：

struct CustomButton: View 

@State private var didTap:Bool = false

  var body: some View 
    Button(action: 
        self.didTap = true
    ) 

    Text("My custom button")
        .font(.system(size: 24))
    
    .frame(width: 300, height: 75, alignment: .center)
    .padding(.all, 20)
    .background(didTap ? Color.blue : Color.yellow)
  

PS：如果你也想管理其他州，那么你可以去enum。

【讨论】：

点击后有没有办法重置颜色？

@pizzae 而不是 self.didTap = true 使用 self.didTap.toggle() 然后它会在每次点击时来回切换。

@jwknz 这是否意味着您必须再次点击它，即总共点击 2 次才能获得原始颜色？有没有办法让它在点击后立即改变颜色？

@pizzae 好吧，除非您将该颜色设置为 false 值，否则它不会变回原始颜色 - 所以是的，这将是 2 次点击。如果您希望它在一段时间后变回，那么您可以使用计时器并在几秒钟后将其设置回来，或者您希望它实现的任何目标。

【参考方案2】：

以防万一有人想要不同的方式来做这件事。 它适用于更多颜色。

struct CustomButton: View 

    @State private var buttonBackColor:Color = .yellow

    var body: some View 
        Button(action: 

            //This changes colors to three different colors.
            //Just in case you wanted more than two colors.
             if (self.buttonBackColor == .yellow) 
                 self.buttonBackColor = .blue
              else if self.buttonBackColor == .blue 
                 self.buttonBackColor = .green
              else 
                 self.buttonBackColor = .yellow
             

            //Same code using switch
            /*
             switch self.buttonBackColor 
             case .yellow:
                 self.buttonBackColor = .blue
             case .blue:
                 self.buttonBackColor = .green
             default:
                 self.buttonBackColor = .yellow
             
             */
        ) 

        Text("My custom button")
            .font(.system(size: 24))
        
        .frame(width: 300, height: 75, alignment: .center)
        .padding(.all, 20)
        .background(buttonBackColor)
    

【参考方案3】：

但是在新的 Ways 中，或者在新版本的 Swift、Xcode 和 ios 中，你只需要写 .color_name，如果你像上面一样使用 class，那么它会产生错误。

在 Struct 类中只需添加 ContentView: View:

@State private var didTap:Bool = false

Button(action:
    self.didTap = true
) 
    Text("ಕನ್ನಡ").font(.system(size: 17))
        .fontWeight(.bold)
        .foregroundColor(didTap ? .orange :.black)
        .frame(minWidth: 0, maxWidth:143)
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.white)
                .shadow(color: .gray, radius: 2, x: 0, y: 2)
        )