Question

我正在MACOS上使用SwiftUI

如果我这样做：

      Button(action: { } ) {
        Text("Press")
        .padding()
        .background(Color.blue)
      }

我明白了：

和两个灰色区域是可点击按钮的末端。但我希望按钮是蓝色区域的形状。关于如何使整个蓝色区域都可轻敲的任何想法。

（我确实看过使用.onTapGesture，但这并未使按钮动起来，因此您知道自己已经点击了它。）

Answer 1

您可以使用ButtonStyle，然后根据传入的配置值指定颜色和其他样式属性，从而获得所需的外观。

如果有一个令人满意的媒介，您可以继承默认的按钮半径，基于文本长度和其他属性的自动宽度，那将是很好的选择，但是至少可以指定所有属性并获得外观想要。

希望这会有所帮助！

import SwiftUI

struct BlueButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .foregroundColor(configuration.isPressed ? Color.blue : Color.white)
            .background(configuration.isPressed ? Color.white : Color.blue)
            .cornerRadius(6.0)
            .padding()
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World")
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            Button(action: {
            }) {
                Text("Press")
                    .frame(maxWidth: 100, maxHeight: 24)
            }
            .buttonStyle(BlueButtonStyle())
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 2

我认为这不可能，但是您可以尝试使用this

支持SPM，是为Swift 5.1构建的，并且精简

Answer 3

受@Gene Z. Ragan的一个很好的答案的启发，我从这个答案开始，并进一步说明了这一点：

使ButtonStyle更加灵活：

struct NiceButtonStyle: ButtonStyle {
  var foregroundColor: Color
  var backgroundColor: Color
  var pressedColor: Color

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
      .font(.headline)
      .padding(10)
      .foregroundColor(foregroundColor)
      .background(configuration.isPressed ? pressedColor : backgroundColor)
      .cornerRadius(5)
  }
}

然后放一些糖使其在通话现场更干净：

extension View {
  func niceButton(
    foregroundColor: Color = .white,
    backgroundColor: Color = .gray,
    pressedColor: Color = .accentColor
  ) -> some View {
    self.buttonStyle(
      NiceButtonStyle(
        foregroundColor: foregroundColor,
        backgroundColor: backgroundColor,
        pressedColor: pressedColor
      )
    )
  }
}

然后意味着我们可以使用默认颜色：白色前景，灰色背景和accentedColor按下的颜色

  Button(action: { } ) {
    Text("Button A")
  }
  .niceButton()

或者我们可以自定义颜色：

  Button(action: { } ) {
    Text("Button B has a long description")
  }
  .niceButton(
    foregroundColor: .blue,
    backgroundColor: .yellow,
    pressedColor: .orange
  )

然后我们得到：

再次感谢Gene。

Answer 4

我在“反馈”助手中与Apple提出了这个建议，以了解他们是否有任何有用的想法。

此处对话

我说：

如果在具有SwiftUI的MACOS上执行此操作：

  Button(action: { } ) {
    Text("Press")
    .padding()
    .background(Color.blue)
  }

我得到了一个蓝色的盒子，上面有两个灰色的点。图片已附上。这是两个灰色区域，它们是可点击按钮的末端。但我希望按钮是蓝色区域的形状。

相同的代码可以在iOS上正常工作。

（我确实看过使用.onTapGesture，但这并未使按钮动起来，因此您知道自己已经点击了它。）

苹果说：

iOS和macOS具有不同的默认ButtonStyles — iOS是无边界的，macOS具有标准的边框效果。

听起来您正在尝试创建自定义的ButtonStyle（因此没有提供任何Chrome系统）。因此，您需要创建一个可以将蓝色背景应用于按钮标签的标签，然后通过“文本”将其应用于您的简单按钮，例如

Button("Press"), action {}).buttonStyle(BluePaddingButtonStyle()

这将确保在运行它的每个平台上它都具有相同的外观。

我说：

嗨，谢谢您的解释。我明白您的意思，但我对提出的方法很满意。

似乎仍然不正确：

  Button(action: { } ) {
    Text("Press")
    .padding()
    .background(Color.blue)
  }

应该产生看起来很奇怪的东西。我不明白为什么这部分代码不能只产生一个蓝色按钮。

正如我所说-这不是问题，因为我已经解决了，但是目前似乎还不直观。

苹果说：

ViewBuilder内部提供的内容用作按钮的标签：不是整个按钮。该按钮仍会附带其背景，边框，前景样式等，如ButtonStyle所述。因此，如果您的按钮需要具有非常特定的外观，则需要自定义该样式：设置为BorderlessButtonStyle（尽管请注意，该样式仍带有特定的前景外观样式）或自定义的ButtonStyle。

我的想法：

这确实帮助我理解了为什么会这样显示。

MacOS上SwiftUI中的按钮问题

4 个答案: