使用 SwiftUI 中自己的 ButtonStyle 在 tvOS 上无法选择按钮

Question

用自定义按钮样式替换标准按钮样式后，该按钮在 tvOS 上不再可选择（它在 iOS 上按预期工作）。 我缺少 PlainButtonStyle() 中的特殊修饰符吗？ 还是 SwiftUI 中的错误？

这是有效的剪辑：

Button(
    action: { },
    label: { Text("Start") }
).buttonStyle(PlainButtonStyle())

这是一个没有的：

Button(
    action: { },
    label: { Text("Start") }
).buttonStyle(RoundedButtonStyle())

其中 RoundedButtonStyle() 定义为：

struct RoundedButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(6)
            .foregroundColor(Color.white)
            .background(Color.blue)
            .cornerRadius(100)
    }
}

Answer 1

如果您创建自己的样式，则必须处理手动对焦。 当然，有不同的方法可以做到这一点。

struct RoundedButtonStyle: ButtonStyle {

    let focused: Bool
    func makeBody(configuration: Configuration) -> some View {
        configuration
            .label
            .padding(6)
            .foregroundColor(Color.white)
            .background(Color.blue)
            .cornerRadius(100)
            .shadow(color: .black, radius: self.focused ? 20 : 0, x: 0, y: 0) //  0

    }
}

struct ContentView: View {

    @State private var buttonFocus: Bool = false
    var body: some View {
        VStack {
            Text("Hello World")

            Button(
                action: { },
                label: { Text("Start") }
            ).buttonStyle(RoundedButtonStyle(focused: buttonFocus))
                .focusable(true) { (value) in
                    self.buttonFocus = value
            }
        }
    }
}

Answer 2

我已经以这种方式完成了它并且工作正常，您需要做的只是处理集中的 state。

struct AppButtonStyle: ButtonStyle {
  
  let color: Color = .clear

  func makeBody(configuration: Configuration) -> some View {
    return AppButton(configuration: configuration, color: color)
  }
  
  
  struct AppButton: View {
    @State var focused: Bool = false

    let configuration: ButtonStyle.Configuration
    let color: Color
    
    var body: some View {
      configuration.label
        .foregroundColor(.white)
        .background(RoundedRectangle(cornerRadius: 20).fill(color))
        .compositingGroup()
        .shadow(color: .black, radius: 5)
        .scaleEffect(focused ? 1.1 : 1.0)
        .padding()
        .focusable(true) { focused in
          withAnimation {
            self.focused = focused
          }
        }
    }
  }
}

当按钮获得焦点时，我只是缩放它，您可以使用相同的想法做其他事情，所以假设您不想更改背景颜色：

.background(RoundedRectangle(cornerRadius: 20).fill(focused ? .red : .white))

要使用：

struct SomeView: View {
  var body: some View {
    NavigationView {
      NavigationLink(
        destination: Text("Destination")) {
        Text("Hi")
      }
      .buttonStyle(AppButtonStyle())
      .padding()
    }
  }
}