VStack更新时UIHostingController固定视图位置错位如何解决

位置偏移由三个共同因素导致：

• 子控制器生命周期调用缺失：添加UIHostingController作为子控制器时，未调用didMove(toParent:)，会导致系统在视图动态更新时无法正确传递布局属性，触发非预期的位置调整。
• 约束存在歧义且锚点选择错误：仅设置了top、trailing两个约束，未给hostingController.view设置内容尺寸优先级，当SwiftUI视图因按钮显隐改变固有内容高度时，Auto Layout无法确定视图的尺寸适配规则，会出现布局约束冲突；同时top锚点直接绑定到根view的top而非safeArea，系统自动调整安全区inset时会改变视图的实际位置。
• SwiftUI侧布局规则不明确：VStack未明确指定内容对齐规则与固定间距，动态增减子视图时默认的排布逻辑会改变整个VStack的布局原点，加剧位置偏移。

按以下步骤修改即可让按钮面板始终保持顶部对齐：

1. 补全子控制器生命周期调用，添加完子控制器视图后主动调用didMove(toParent: self)。
2. 将top约束的锚点改为当前控制器view的safeAreaLayoutGuide.topAnchor，避免系统自动调整安全区inset导致的偏移。
3. 给hostingController.view设置最高的内容拥抱与压缩阻力优先级，iOS 16及以上版本可额外设置sizingOptions = .intrinsicContentSize，让hostingController的view尺寸严格匹配SwiftUI内容的固有尺寸，不被Auto Layout意外拉伸。
4. 给SwiftUI侧的VStack设置固定间距与顶对齐规则，确保动态增减按钮时布局原点始终在VStack顶部。

修正后的UIKit侧代码：

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let buttons = Buttons()
        let hostingController = UIHostingController(rootView: buttons)
        // 明确尺寸自适应规则，仅匹配内容固有尺寸
        if #available(iOS 16.0, *) {
            hostingController.sizingOptions = .intrinsicContentSize
        }

        addChild(hostingController)
        view.addSubview(hostingController.view)
        // 补全子控制器生命周期调用
        hostingController.didMove(toParent: self)

        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        // 设置最高内容优先级，避免被Auto Layout拉伸
        hostingController.view.setContentHuggingPriority(.required, for: .vertical)
        hostingController.view.setContentHuggingPriority(.required, for: .horizontal)
        hostingController.view.setContentCompressionResistancePriority(.required, for: .vertical)
        hostingController.view.setContentCompressionResistancePriority(.required, for: .horizontal)

        NSLayoutConstraint.activate([
            hostingController.view.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -16.0),
            hostingController.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 16.0)
        ])
    }
}

修正后的SwiftUI侧代码：

struct Buttons: View {
    @State var isButton1Hidden = false
    @State var isButton2Hidden = true
    @State var isButton3Hidden = true

    var body: some View {
        // 设置固定按钮间距，避免布局跳动
        VStack(spacing: 12) {
            if !isButton1Hidden {
                Button {
                    isButton2Hidden = false
                } label: {
                    Image(systemName: "triangle")
                        .foregroundColor(.white)
                }
                .frame(width: 50.0, height: 50.0)
                .background(.black.opacity(0.7))
                .clipShape(Circle())
            }

            if !isButton2Hidden {
                Button {
                    // Action
                } label: {
                    Image(systemName: "circle")
                        .foregroundColor(.white)
                }
                .frame(width: 50.0, height: 50.0)
                .background(.black.opacity(0.7))
                .clipShape(Circle())

            }

            if !isButton3Hidden {
                Button {
                    // Action
                } label: {
                    Image(systemName: "square")
                        .foregroundColor(.white)
                }
                .frame(width: 50.0, height: 50.0)
                .background(.black.opacity(0.7))
                .clipShape(Circle())
            }
        }
        .frame(maxWidth: .infinity, alignment: .top) // 明确内容从顶部开始排布
    }
}

struct Buttons_Previews: PreviewProvider {
    static var previews: some View {
        Buttons()
    }
}

内容的提问来源于stack exchange，提问作者Kex