Проблема с кнопками в SwiftUI на MacOS

Question

Я использую SwiftUI на MACOS

Если я сделаю это:

      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

Вдохновленный отличным ответом @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 нажатыйColor

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

или мыМожно настроить цвета:

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

И мы получим:

Еще раз спасибо, Джин.

Answer 3

Я не думаю, что это возможно, но вы могли бы попробовать использовать this

Поддерживает SPM, построено для Swift 5.1 и является обедненным

Answer 4

Я поднял это с Apple на помощнике по обратной связи, чтобы узнать, есть ли у них какие-либо полезные мысли.

Диалог здесь:

Я сказал:

Если на MACOS с SwiftUI я делаю это:

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

Я получаю синюю коробку с двумя серыми битами, торчащими по бокам. Изображение прилагается. Вот эти две серые области - это концы нажимаемой кнопки. но я ожидаю, что кнопка будет иметь форму синей области.

Тот же код работает нормально, как и ожидалось на iOS.

(Я смотрел на использование .onTapGesture, но это не анимирует кнопку, так что вы знаете, что нажали ее).

Apple сказала:

iOS и macOS имеют разные стили ButtonStyles по умолчанию - iOS не имеет границ, macOS имеет этот стандартный эффект рамки.

Звучит так, будто вы пытаетесь создать пользовательский стиль ButtonStyle (и, следовательно, у вас нет хрома в какой-либо системе). Таким образом, вы захотите создать его, который может применить синий фон к метке кнопки, а затем применить его к вашей простой кнопке с текстом, например,

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

. Это обеспечит наличиеТо же самое на каждой платформе, на которой вы ее запускаете.

Я сказал:

Привет, Спасибо за объяснение. Я понимаю, что вы говорите, и я в порядке с методом, который я придумала.

Все еще не кажется правильным, что:

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

должно произвести что-то настолько странноеИщу. Я не понимаю, почему этот фрагмент кода не может просто создать синюю кнопку.

Как я уже сказал - это не проблема, потому что я обошел ее, но в настоящее время она не кажется интуитивно понятной.

Apple сказала:

Предоставленный контент внутри ViewBuilder используется как метка кнопки: не вся кнопка. Кнопка будет по-прежнему идти с окружающим фоном, рамкой, стилем переднего плана и т. Д., Как описано в ее ButtonStyle. Поэтому, если ваша кнопка должна иметь очень специфичный внешний вид, она должна настроить этот стиль: либо для BorderlessButtonStyle (хотя обратите внимание, что он по-прежнему имеет определенный стиль внешнего вида на переднем плане), либо для пользовательского ButtonStyle.

Мои мысли:

Это помогло мне понять, почему это так.