SwiftUI ButtonStyle编译报错：Type '() -> N'无法遵循View协议

问题场景 #

我实现了一个自定义按钮样式HighlightableButtonStyle，代码如下：

struct HighlightableButtonStyle<N, H>: ButtonStyle where N: View, H: View {
  
  private let alignment: Alignment
  private let normal: () -> N
  private let highlighted: () -> H
  
  init(alignment: Alignment = .center, 
       @ViewBuilder normal: @escaping () -> N,
       @ViewBuilder highlighted: @escaping () -> H) {
    self.alignment = alignment
    self.normal = normal
    self.highlighted = highlighted
  }
  
  func makeBody(configuration: Configuration) -> some View {
    configuration.label
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .contentShape(Rectangle())
      .background(alignment: alignment, content: {
        configuration.isPressed ? Color.red : Color.blue //1
      })
  }
}

原本使用固定颜色时编译正常，但将//1处代码改为传入的样式后：

configuration.isPressed ? highlighted : normal

出现编译错误：

Result values in '? :' expression have mismatching types '() -> H' and '() -> N'
Insert ' as! () -> N'
Type '() -> N' cannot conform to 'View'

明明已经约束N遵循View协议，却依然报最后一行错误，请问问题出在哪？

问题原因与解决方法 #

核心问题 #

• 三元运算符类型不匹配：highlighted和normal都是闭包类型（() -> H、() -> N），三元运算符要求两个分支的返回类型必须完全一致，但H和N是不同的泛型类型，编译器无法自动统一它们。
• 闭包未执行：你直接传递了闭包本身，而非闭包执行后的View实例。编译器把闭包类型当成了要渲染的View，自然会报错——因为闭包本身不是View，闭包返回的N才是。

修复代码 #

方案一：用AnyView统一类型

把闭包调用起来，同时用AnyView包装返回的视图，修改makeBody方法：

func makeBody(configuration: Configuration) -> some View {
  configuration.label
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .contentShape(Rectangle())
    .background(alignment: alignment) {
      if configuration.isPressed {
        AnyView(highlighted())
      } else {
        AnyView(normal())
      }
    }
}

如果想用三元运算符，也要先执行闭包再转成AnyView：

.background(alignment: alignment) {
  configuration.isPressed ? AnyView(highlighted()) : AnyView(normal())
}

方案二：统一泛型类型

如果不想用AnyView，可以让正常状态和高亮状态的视图类型一致，修改泛型约束：

struct HighlightableButtonStyle<V>: ButtonStyle where V: View {
  
  private let alignment: Alignment
  private let normal: () -> V
  private let highlighted: () -> V
  
  init(alignment: Alignment = .center, 
       @ViewBuilder normal: @escaping () -> V,
       @ViewBuilder highlighted: @escaping () -> V) {
    self.alignment = alignment
    self.normal = normal
    self.highlighted = highlighted
  }
  
  func makeBody(configuration: Configuration) -> some View {
    configuration.label
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .contentShape(Rectangle())
      .background(alignment: alignment) {
        configuration.isPressed ? highlighted() : normal()
      }
  }
}

内容的提问来源于stack exchange，提问作者Duck