UIView可表示及其内容的固有大小

Question

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

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内其他视图的设备上运行时，您会看到"Hello"部分从底部剪裁。在预览版中，您会在"Hello"周围看到一个更大的蓝色矩形(边界)，而我希望它拥抱内容。VStack不假定整体视图的完整自然高度。

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

Answer 1

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

对我有用的是有点黑客，可能不适用于那里的每个通用视图(并且可能无法很好地扩展数十个视图)，但适用于简单的用例，特别是如果您将其托管在动态大小的UITableViewCell中。

这个想法是使用同一视图的虚拟版本，并在.overlay( ... )中设置VibrantView。这将强制覆盖层采用与父 SwitfUIView相同的总体大小。由于所应用的视图修饰符是VibrantView换行的同一视图的副本，因此您最终会在运行时和 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()
}
)

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

Answer 2

为什么这么复杂？

试试这个：

struct Blur: UIViewRepresentable {
#if os(iOS)
var style: UIBlurEffect.Style = .systemMaterial
#else
var style: UIBlurEffect.Style = .light
#endif
init(_ style: UIBlurEffect.Style = .dark) {
self.style = style
}
func makeUIView(context: Context) -> UIVisualEffectView {
return UIVisualEffectView(effect: UIBlurEffect(style: style))
}
func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
uiView.effect = UIBlurEffect(style: style)
}
}

并使用：

Text("Great text with prominent")
.font(.largeTitle)
.padding()
.background(Blur(.prominent))

通常，您不应该在UIViewRepresentable中使用约束 ->大小将由父视图定义，例如此示例中的文本或VStack，后者为模糊提供了正确的大小。通常，模糊不是单独存在的，但典型的是模糊的背景，因为您想在其上放置文本，以便更好地阅读文本。