如何使用NSViewRepresentable在SwiftUI视图中将NSTextView垂直居中?

时间:2020-04-07 23:11:26

标签: macos swiftui nstextview

我有一个简单的NSViewRepresentable,其中包裹了NSTextView

struct TextView: NSViewRepresentable {
  typealias NSViewType = NSTextView

  var text: NSAttributedString

  func makeNSView(context: Context) -> NSTextView {
    let view = NSTextView()
    // set background color to show view bounds
    view.backgroundColor = NSColor.systemBlue
    view.drawsBackground = true
    view.isEditable = false
    view.isSelectable = false
    return view
  }

  func updateNSView(_ nsView: NSTextView, context: Context) {
    nsView.textStorage?.setAttributedString(text)
  }
}

我想将其垂直居中,因此我在上方和下方使用VStackSpacers。 我想在窗口周围留出与窗口大小成比例的左右边距,因此我将其包裹在GeometryReaderframe()中。

struct ContentView: View {
  func textView() -> some View {
    let text = """
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod \
      tempor incididunt ut labore et dolore magna aliqua.
      """

    // Note: real application has more complex text than this, *not* using
    // NSAttributedString isn't really an option, at least till SwiftUI has
    // proper rich text support.

    let size: CGFloat = 18
    let font = NSFont(name: "LeagueSpartan-Bold", size: size) 
    let attrString = NSAttributedString(
      string: text,
      attributes: [ .foregroundColor: NSColor.systemYellow,
                    .font: font ?? NSFont.systemFont(ofSize: size) ])
    return TextView(text: attrString)
  }

  var body: some View {
    let textView: some View = self.textView()
    return ZStack {
      // use ZStack to provide window background color
      Color(NSColor.systemTeal)
      VStack {
        Spacer()
        GeometryReader { m2 in
          textView.frame(width: m2.size.width / 1.618)
        }
        Spacer()
      }
    }
  }
}

水平框架工作正常,但垂直间距根本不起作用:

initial state

(初始状态)

调整窗口大小会产生恶作剧:

resize from bottom

(从底部调整大小)

resize from bottom to top, then down again

(从底部到顶部调整大小,然后再减小)

哦,预览版完全是香蕉:

Preview

如果我将自定义TextView替换为SwiftUI本机Text,则布局工作正常,这表明问题出在TextView中。 (另请注意,默认窗口大小较小。)

native Text

NSTextView的大小似乎设置不正确。如果我将nsView.sizeToFit()添加到updateNSView()

    func updateNSView(_ nsView: NSTextView, context: Context) {
        nsView.textStorage?.setAttributedString(text)
        nsView.sizeToFit()
    }

这使我的默认窗口尺寸变小了,并且当我调整大小时,文本不会跳动到窗口底部,但是文本仍然固定在窗口顶部附近,预览仍然损坏,并从底部调整大小仍然可以NSTextView临时填充窗口的大部分高度。

我尝试摆弄的其他内容:isVerticallyResizablesetContentCompressionResistancePriorityautoresizingMasktranslatesAutoresizingMaskIntoConstraintsinvalidateIntrinsicContentSize。这些似乎都没有什么明显的区别。

似乎我想要的是在更改包含SwiftUI视图的大小时更新NSTextView的大小,但是似乎没有任何明显的方法可以这样做,而且我可能还是错了。

1 个答案:

答案 0 :(得分:1)

根据我的理解,如果您只需要显示NSAttributedString,则如下所示,基于NSTextField的方法更合适,因为NSTextView没有默认的内部布局,并且需要明确的外部框架。

demo

此处已修改为可表示,ContentView不需要更改。

struct TextView: NSViewRepresentable {
  typealias NSViewType = NSTextField

  var text: NSAttributedString

  func makeNSView(context: Context) -> NSTextField {
    let view = NSTextField()
    // set background color to show view bounds
    view.backgroundColor = NSColor.systemBlue
    view.drawsBackground = true
    view.isEditable = false
    view.isSelectable = false
    view.lineBreakMode = .byWordWrapping
    view.maximumNumberOfLines = 0
    view.translatesAutoresizingMaskIntoConstraints = false
    view.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
    view.setContentCompressionResistancePriority(.required, for: .vertical)
    return view
  }

  func updateNSView(_ nsView: NSTextField, context: Context) {
    nsView.attributedStringValue = text
  }
}