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 與其他元素相關。