SwiftUI自定义FlowLayout无法自适应容器调整文本视图尺寸问题

问题根源 #

你的实现存在两个核心问题，导致文本视图无法自适应容器宽度换行：

1. 尺寸计算未传递宽度约束：调用subview.sizeThatFits(.unspecified)时，文本视图会默认按无限宽度计算，返回单行文本的尺寸，不会处理换行后的高度。
2. 布局时未传递明确尺寸建议：placeSubviews中给子视图传递.unspecified的布局建议，文本视图依然会按无宽度限制的方式渲染，超出容器的部分无法换行扩展。

系统VStack/HStack能正常工作，是因为它们会根据自身可用空间，给子视图传递对应尺寸约束（比如VStack会把自身宽度作为子视图的可用宽度），子视图能据此计算正确的换行高度。

修改后的完整代码 #

public struct FlowLayout: Layout {
    private let spacing: CGFloat

    public init(spacing: CGFloat = 8) {
        self.spacing = spacing
    }

    public func sizeThatFits(
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout ()
    ) -> CGSize {
        let containerWidth = proposal.replacingUnspecifiedDimensions().width
        return layout(proposal: proposal, subviews: subviews, containerWidth: containerWidth).totalSize
    }

    public func placeSubviews(
        in bounds: CGRect,
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout ()
    ) {
        let containerWidth = bounds.width
        let layoutResult = layout(proposal: proposal, subviews: subviews, containerWidth: containerWidth)
        
        for (frame, subview) in zip(layoutResult.frames, subviews) {
            let placedFrame = frame.offsetBy(dx: bounds.minX, dy: bounds.minY)
            subview.place(
                at: placedFrame.origin,
                proposal: ProposedViewSize(width: placedFrame.width, height: placedFrame.height)
            )
        }
    }

    private func layout(
        proposal: ProposedViewSize,
        subviews: Subviews,
        containerWidth: CGFloat
    ) -> (frames: [CGRect], totalSize: CGSize) {
        var frames: [CGRect] = []
        var currentX: CGFloat = 0
        var currentY: CGFloat = 0
        var lineMaxHeight: CGFloat = 0
        
        for subview in subviews {
            // 计算当前行剩余可用宽度
            let availableWidth = containerWidth - currentX
            // 基于可用宽度获取子视图的正确尺寸（文本视图会自动换行计算高度）
            var subviewSize = subview.sizeThatFits(ProposedViewSize(width: availableWidth, height: .infinity))
            
            // 当前行放不下，换行重新计算
            if currentX + subviewSize.width > containerWidth {
                currentY += lineMaxHeight + spacing
                currentX = 0
                lineMaxHeight = 0
                
                let newAvailableWidth = containerWidth - currentX
                subviewSize = subview.sizeThatFits(ProposedViewSize(width: newAvailableWidth, height: .infinity))
            }
            
            // 记录子视图的布局frame
            frames.append(CGRect(x: currentX, y: currentY, width: subviewSize.width, height: subviewSize.height))
            
            // 更新当前行位置和最大高度
            currentX += subviewSize.width + spacing
            lineMaxHeight = max(lineMaxHeight, subviewSize.height)
        }
        
        let totalHeight = currentY + lineMaxHeight
        return (frames, CGSize(width: containerWidth, height: totalHeight))
    }
}

关键修改点 #

• 重构layout函数，逐行计算子视图的可用宽度，让子视图基于该宽度自行计算尺寸，文本视图会自动处理换行并返回正确高度。
• placeSubviews中给子视图传递明确的尺寸建议（即布局中分配的宽度和高度），确保子视图按约束空间渲染。
• 移除原代码中强行截断子视图宽度的逻辑，改为依赖子视图自身的尺寸计算能力适配空间。

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