swift - UIViewRepresentable 及其内容的固有大小

Question

我创建了一个 UIViewRepresentable对于 UIVisualEffectView为了使某些组件充满活力。这是可行的，但是它似乎有时会垂直缩小控件，或者只是在运行时随机改变它们的边界。我似乎无法让它可靠地工作。我需要它来处理任何 SwiftUI 内容甚至其他 UIViewRepresentable用于代替内容。包装UIVisualEffectView UIView 里面使用自动布局似乎有所帮助，但其他控件(例如包裹在 UILabel 内的自定义 UIViewRepresnetable 会被垂直剪切)。

public struct VibrantView<Content: View>: UIViewRepresentable {
  private let content: UIView!

  private let vibrancyBlurEffectStyle: UIBlurEffect.Style

  init(vibrancyBlurEffectStyle: UIBlurEffect.Style, @ViewBuilder content: () -> Content) {
    self.content = UIHostingController(rootView: content()).view

    self.vibrancyBlurEffectStyle = vibrancyBlurEffectStyle
  }

  public func makeUIView(context: Context) -> UIView {
    let containerView = UIView()

    let blurEffect = UIBlurEffect(style: vibrancyBlurEffectStyle)
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let blurView = UIVisualEffectView(effect: vibrancyEffect)

    blurView.translatesAutoresizingMaskIntoConstraints = false
    containerView.addSubview(blurView)

    content.backgroundColor = .clear
    content.translatesAutoresizingMaskIntoConstraints = false
    blurView.contentView.addSubview(content)

    NSLayoutConstraint.activate([
      blurView.widthAnchor.constraint(equalTo: containerView.widthAnchor),
      blurView.heightAnchor.constraint(equalTo: containerView.heightAnchor),

      content.widthAnchor.constraint(equalTo: blurView.widthAnchor),
      content.heightAnchor.constraint(equalTo: blurView.heightAnchor),
    ])

    content.setContentHuggingPriority(.defaultLow, for: .vertical)
    content.setContentHuggingPriority(.defaultLow, for: .horizontal)
    content.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
    content.setContentCompressionResistancePriority(.defaultHigh, for: .vertical)

    blurView.setContentHuggingPriority(.defaultLow, for: .vertical)
    blurView.setContentHuggingPriority(.defaultLow, for: .horizontal)
    blurView.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
    blurView.setContentCompressionResistancePriority(.defaultHigh, for: .vertical)

    return containerView
  }

  public func updateUIView(_ uiView: UIView, context: Context) {
  }
}

用作:

  ...

  VibrantView(vibrancyBlurEffectStyle: .dark) {
    Text("Hello")
      .foregroundColor(Color.gray)
  }

当在 VStack 内有其他 View 的设备上运行时，您会看到“Hello”从底部被部分剪掉。在预览中，您会在“Hello”周围看到一个更大的蓝色矩形(边界)，而我希望它能够包围内容。 VStack不假定整体 View 的完整自然高度。

使用fixedSize()不起作用，并且与其他控件一起使用时会产生更奇怪的结果。

Answer 1

在尝试了各种技术和技巧之后 - 我根本无法让 UIKit 容器(即 VibrantView)可靠地拥抱其 SwiftUI 内容，而不添加固定大小的 .frame(... ) 修饰符位于顶部 - 这使得很难将其与动态大小的 Text 一起使用。

对我有用的方法是有点破解，可能不适用于每个通用 View (并且可能无法很好地扩展数十个 View )，但对于简单的用例来说效果很好，特别是如果您将其托管在动态大小的 UITableViewCell 内。

这个想法是使用同一 View 的虚拟版本，并在 .overlay( ... ) 中设置 VibrantView。这将强制覆盖层采用与父 SwitfUI View 相同的整体大小。由于应用修改器的 View 是 VibrantView 包装的同一 View 的副本，因此您最终会在运行时和 Xcode 预览中获得正确的动态大小。

所以像这样:

  SomeView()
    .frame(minWidth: 0, maxWidth: .infinity)
    .overlay(
      VibrantView(vibrancyBlurEffectStyle: .dark) {
        SomeView()
         .frame(minWidth: 0, maxWidth: .infinity)
      }
  )

我可以想象将其转换为修饰符，以便将上述内容包装在一次调用中，但就我而言，为了确保它对图像保持高性能，我正在执行以下操作:

  Circle()
    .foregroundColor(.clear)
    .frame(width: 33, height: 33)
    .overlay(
      VibrantView(vibrancyBlurEffectStyle: .systemMaterialDark) {
        Image("some image")
          .resizable()
      }
  )

与实际图像相比，创建圆形可以说是更轻的重量。我创建一个透明圆圈，在其中设置图像的实际大小，然后将 VibrantView 容器放入 overlay 中。