UIViewRepresentable 隐藏在 SwiftUI 视图后面

Question

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

如何让我的 UIViewRepresentable 正确调整其内容的大小？

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

https://github.com/yonat/MultiSelectSegmentedControl

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

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

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

我知道这是一个约束问题，并且 Xcode 查看调试有助于确认：

运行时：布局问题：Position 对于 MultiSelectSegmentedControl 不明确。

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

在 MultiSelectSegmentedControl 的初始化中是以下设置代码：

   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 alignment 的视图。

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

=== 编辑 2 ==

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

== 编辑 3 ==

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

Answer 1

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

Answer 2

alignment：.center 将拾取器的前缘居中，将其从 VSTack 中移除。

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