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

pvcm50d1  于 2022-10-31  发布在  Swift
关注(0)|答案(4)|浏览(345)

我正在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)
     //    }

    }
}

这是我的按钮的外观(这很好):

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

  • 谢谢-谢谢
ljo96ir5

ljo96ir51#

要执行此操作,您需要根据更改的状态给予颜色:

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

9rnv2umw

9rnv2umw2#

以防万一有人想要不同的方法。它适用于更多的颜色。

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)
    }
}
j2cgzkjk

j2cgzkjk3#

但是在新的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)
        )
}
3ks5zfa0

3ks5zfa04#

不久前,我们在一个智力测验应用程序上做了这个。如果用户答对了,它会把按钮变成绿色,如果答错了,它会把按钮变成红色。通过删除elif语句,同样的方法也可以用于一个可点击的按钮。

@IBAction func answerButtonPressed(_ sender: UIButton) {

    let actualAnswer = quiz[questionNumber].a
    let buttonPressed = sender.currentTitle!

    if buttonPressed == actualAnswer {
        print("Right")
        sender.backgroundColor = UIColor.green
    } else {
        print("wrong")
        sender.backgroundColor = UIColor.red
    }

相关问题