点击时 SwiftUI 按钮不灰显

Question

我真的很想理解一些事情。 我想创建一个带有一些文本的按钮。该按钮有一个框架和一个颜色（颜色与背景相同）。当我点击该按钮时，我希望产生某种效果（整个按钮的某种变色）。如果颜色与背景相同，则在点击期间文本的颜色会有所不同。如果我有一个带有红色背景的按钮，则会对整个按钮产生效果。我附上了一张关于事情应该是什么样子的图片。

点击前按钮应如下所示：

当用户按下按钮（不释放）时，按钮如下所示：

在我的情况下，红色矩形颜色与背景颜色相同。但我想要相同的矩形覆盖。取而代之的是，我获得了以下内容。

点击前：

在点击期间：

在这种情况下，只有数字有某种叠加。但矩形不是。

这里是代码。如果按钮的颜色与背景颜色相同，我应该更改什么以获得相同的反馈？

Button(action: {
    some action
}){
    Text("1")
        .font(.title)
        .foregroundColor(.blue)
        .frame(width: 80, height: 48)
        .background(Color.white)
        .cornerRadius(4)
}

Answer 1

我理解你的问题。我认为按钮按下效果根据背景颜色采用颜色，所以我刚刚破解了这个技巧。在我的代码中，我刚刚使用了一个 ZStack 并给出了这样的白色背景颜色：

struct ContentView: View {
  var body: some View {
    ZStack{
      Color.red
      ZStack{
        Rectangle().fill(Color.white)
        Button(action: {
          //      some action
        }){
          Text("1")
            .font(.title)
            .frame(width: 80, height: 48, alignment: .center)
            .background(Color.red)
        }//.buttonStyle(MyButtonStyle()) // Set style if you want custom color on press event and remove background color from text.
      }.frame(width: 80, height: 48, alignment: .center).cornerRadius(4)
    }
  }
}

struct MyButtonStyle: ButtonStyle {
  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
      .background(configuration.isPressed ? Color.blue.opacity(0.5) : Color.red)
  }
}

如果您想在印刷机上添加自己的颜色，请设置按钮样式并从文本中删除背景颜色。

希望这有用:)

Answer 2

我不太了解这个问题，但是我可以说的是，您有一个背景与您的主背景相同的按钮，并且您想要用户按下按钮时的效果，为什么不添加一些Shadow？

    Button(action: {
        
    }){
        Text("1")
            .font(.title)
            .foregroundColor(.blue)
            .frame(width: 80, height: 48)
            .background(Color.white)
            .cornerRadius(4)
            .shadow(color: Color.black.opacity(0.5), radius: 2, x: 0, y: 0)
    }

如你所说的结果：

Answer 3

我不能说完全理解您想要实现的目标，但是可以在按钮样式的帮助下完成不同的按钮按下视觉反馈。在一个样式中，我们可以访问isPressed 状态，因此可以根据它有条件地更改按钮的呈现方式。

这是一些应该有用的演示

Button(action: {
    some action
}){
    Text("1")
}
.buttonStyle(MyButtonStyle())

struct MyButtonStyle: ButtonStyle {

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
        .font(.title)
        .foregroundColor(configuration.isPressed ? .white : .blue) // << ex. !!
        .frame(width: 80, height: 48)
        .background(configuration.isPressed ? Color.clear : Color.white)   // << ex. !!
        .cornerRadius(4)
    }
}