SwiftUI：未显式声明高度时HStack无法填充空间的问题

问题描述 #

包含TitleCard和ProductCard的HStack中，两个子组件均已声明显式高度，但将该HStack放入外层VStack后，它不会自动占用空间，必须手动指定高度才能正常显示。

核心原因 #

1. ProductCard布局导致高度计算异常
   ProductCard内部的VStack使用了Spacer()，当存在designer文本时，Spacer会试图占用所有可用垂直空间，但由于外层没有明确的高度约束，导致VStack的高度无法被正确计算，进而让父HStack的高度无法确定。

2. MainView的VStack挤压HStack
   MainView的外层VStack上下都添加了Spacer()，如果HStack的高度没有明确的内容支撑，Spacer会优先占用剩余空间，将HStack挤压到高度为0。

3. 横向ScrollView的高度依赖循环
   外层的trackableScrollView是横向滚动，它的高度需要由子视图（即HStack）的高度决定，但HStack的高度又依赖子组件的高度计算，当子组件高度不确定时，会形成循环依赖，导致ScrollView高度被压缩。

解决方法 #

方法1：修复ProductCard的布局，明确高度 #

移除ProductCard中不必要的Spacer，并确保其内部VStack有明确的最小高度：

@ViewBuilder private var card: some View {
    VStack(alignment: .leading, spacing: 8) {
        if let productImage = viewModel.productImage {
            Image(uiImage: productImage)
                .resizable()
                .frame(width: Constants.productImageWidth, height: Constants.productImageHeight)
                .scaledToFit()
                .transition(.opacity.animation(.default))
        } else {
            Rectangle()
                .fill(Color.clear)
                .frame(width: Constants.productImageWidth, height: Constants.productImageHeight)
        }

        if let designer = viewModel.designer {
            Text(designer)
                .font(SwiftUI.Font((Style.font(.sansSerifBold14))))
            // 移除原有的Spacer，避免高度拉伸异常
        }
    }
    // 确保VStack最小高度等于图片高度，避免被压缩
    .frame(minHeight: Constants.productImageHeight)
}

方法2：调整MainView的VStack结构 #

移除MainView中上下的Spacer，让HStack自然占用所需空间：

var body: some View {
    VStack {
        HStack(spacing: Constants.hStackSpacing) {
            ForEach(viewModel.products, id: \.self) { product in
                ProductCard(viewModel: .init(
                    product: product,
                    imageWidth: Constants.productImageWidth))
                .onTapGesture {
                    viewModel.productCardTapped(product: product)
                }
            }
        }
        .padding(.leading)
    }
    .trackableScrollView(
        axis: .horizontal,
        closeToEndBuffer: 50,
        didInteract: { _ in
            viewModel.userDidInteract()
        }, didReachEnd: {
            viewModel.userDidReachEnd()
        })
}

方法3：确保TitleCard的高度完整 #

TitleCard的VStack包含固定高度的mainStack和额外的shopLabel，可以给整个TitleCard添加明确的最小高度，避免其高度被压缩：

var body: some View {
    VStack(alignment: .leading) {
        mainStack
            .frame(width: Constants.width, height: Constants.height)
        shopLabel
    }
    .onTapGesture {
        viewModel.cardTapped()
    }
    // 确保TitleCard的最小高度为mainStack高度加上shopLabel的预估高度
    .frame(minHeight: Constants.height + 20) // 20为shopLabel的预估高度，可根据实际调整
}

方法4：UIKit嵌入时的约束优化 #

确保UIHostingController的view正确适配UIStackView的布局，添加以下代码让其自动适应内容高度：

let mainVC = UIHostingController(rootView: MainView(viewModel: .init(service: .init())))
mainVC.view.translatesAutoresizingMaskIntoConstraints = false
// 添加约束让hostingView的高度自适应内容
NSLayoutConstraint.activate([
    mainVC.view.heightAnchor.constraint(greaterThanOrEqualToConstant: 0)
])
self.addViewToContentStackView(view: mainVC.view, stackIndex: 2, parentItemOrder: parentItem.sortedOrder)

验证效果 #

完成上述修改后，HStack会自动根据子组件的实际高度计算自身高度，无需手动指定即可正常占用空间，同时适配横向滚动和UIKit嵌入的场景。

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