UIViewRepresentable 隐藏在 SwiftUI View 后面

Question

我最近询问了一个与此问题相关的问题（并得到了有效的答案）。

How do I get my UIViewRepresentable to correctly size for its content?

正如我在上一篇文章中提到的， 我想在我的 SwiftUI 视图中使用 Yonat Sharon 编写的很棒的 MultiSegmentPicker。

https://github.com/yonat/MultiSelectSegmentedControl

实施答案表明我还没有走出困境。

请注意，该栏位于“底部”文本视图的后面

在我的非演示视图中，它完全隐藏在其他视图后面 - 所以它根本不可见。

我知道这是一个约束问题，Xcode 视图调试有助于确认：

运行时：布局问题：位置不明确 MultiSelectSegmentedControl。

我在哪里解决这个问题？是否在 UIViewRepresentable 中的行为不像我预期的那样？由于该包已经存在多年，纯 UIKit 代码不会遇到这个问题，我很确定问题出在 UIViewRepresentable 代码中。

在 MultiSelectSegmentedControl 的 init 中有以下设置代码：

   private func setup() {
        addConstrainedSubview(borderView, constrain: .top, .bottom, .left, .right)
        addConstrainedSubview(stackView, constrain: .top, .bottom)
        constrain(stackView, at: .left, to: borderView, diff: 1)
        constrain(stackView, at: .right, to: borderView, diff: -1)
        clipsToBounds = true
        stackView.distribution = .fillEqually
        borderWidth = { borderWidth }()
        borderRadius = { borderRadius }()
        tintColorDidChange()
        borderView.isUserInteractionEnabled = false
        addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didTap)))
        accessibilityIdentifier = "MultiSelectSegmentedControl"
    }

在 MultiSegmentPicker: UIViewRepresentable 的 init 中，我发现以下与约束相关的代码：

   public init(
        selectedSegmentIndexes: Binding<IndexSet>,
        items: [Any],
        allowsMultipleSelection: Bool? = nil,
        borderWidth: CGFloat? = nil,
        borderRadius: CGFloat? = nil,
        isVertical: Bool? = nil,
        isVerticalSegmentContents: Bool? = nil,
        selectedBackgroundColor: UIColor? = nil
    ) {
       _selectedSegmentIndexes = selectedSegmentIndexes
        uiView = MultiSelectSegmentedControl(items: items)
        uiView.translatesAutoresizingMaskIntoConstraints = false

        uiView.allowsMultipleSelection =? allowsMultipleSelection
        uiView.borderWidth =? borderWidth
        uiView.borderRadius =? borderRadius
        uiView.isVertical =? isVertical
        uiView.isVerticalSegmentContents =? isVerticalSegmentContents
        uiView.selectedBackgroundColor =? selectedBackgroundColor
       }

另外，分段视图 MultiSelectSegment: UIView 使用以下代码：

    private func setup() {
    addConstrainedSubview(stackView, constrain: .topMargin, .bottomMargin, .leftMargin, .rightMargin)
    layoutMargins = UIEdgeInsets(top: 7, left: 7, bottom: 7, right: 7)
    stackView.spacing = layoutMargins.left
    stackView.isUserInteractionEnabled = false
    stackView.alignment = .center
    isAccessibilityElement = true
    accessibilityTraits = [.button]
    accessibilityIdentifier = "MultiSelectSegment"
}

下面是演示上述问题的代码：

   var body: some View {
        VStack(alignment: .center) {
            Text("top")
            Spacer()
            MultiSegmentPicker(
                selectedSegmentIndexes: $selectedSegmentIndexes,
                items: ["First", "Second", "Third", "Done"]
            ).fixedSize()
            Text("bottom")
        }
    }
}

我对这段代码的期望是，带有“First”、“Second”等的条将位于底部的中心，而不是推到后缘，并且它会高于 不在显示“底部”的文本视图后面

=== 编辑 === 这是移除了垫片并移除了 .center 对齐的视图。

看看差异可能会有所帮助...

=== 编辑 2 ==

我想展示更多“意外”的行为。仔细想想，一点也不意外。多选器的位置正确，但被更大的视图隐藏了。当我在多选器之后添加一个常规的 Picker() 对象时，多选器会窥视... 但是这两张图说明了很多：

== 编辑 3 ==

Yonat 已经修复了这个错误，它现在可以正常工作了！ （谢谢！）

Answer 1

问题似乎出在intrinsicContentSize。我在控件的 2.3.3 版本中进行了更改，现在 fixedSize() 工作正常。

Answer 2

对齐方式：.center 使您的选择器的前缘居中，从 VSTack 中删除它。

删除 Spacer() 并且它不会落后，但由于它被设置为 stackView SwiftUI 不会自动将它与其他元素相关联。