Swift - UIStackView动态适配多标签换行布局问题求助

由于UIStackView本身不支持自动换行的流式布局，且你无法使用AutoLayout和CollectionView，这里提供一个纯手动frame计算的轻量级解决方案，实现标签超出容器宽度时自动换行：

核心思路 #

1. 自定义一个容器视图承载所有标签，替代UIStackView
2. 遍历标签逐个计算frame：
   • 记录当前行的起始X坐标、当前行的最大高度
   • 判断当前标签加入后是否超出容器可用宽度，超出则换行
   • 更新标签的frame，并维护当前行的布局状态
3. 最后自动调整容器视图的高度，适配所有标签的总占用空间

完整代码实现（Swift） #

1. 自定义流式标签容器 #

class FlowTagContainerView: UIView {
    // 标签间水平间距
    var horizontalSpacing: CGFloat = 8
    // 行之间垂直间距
    var verticalSpacing: CGFloat = 8
    // 容器内边距
    var contentInsets: UIEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
    
    func reload(with tags: [UILabel]) {
        // 清除已有标签
        subviews.forEach { $0.removeFromSuperview() }
        
        var currentX = contentInsets.left
        var currentY = contentInsets.top
        var currentLineMaxHeight: CGFloat = 0
        
        // 计算容器可用宽度
        let availableWidth = bounds.width - contentInsets.left - contentInsets.right
        
        for tag in tags {
            tag.sizeToFit() // 计算标签实际尺寸
            let tagWidth = tag.bounds.width
            let tagHeight = tag.bounds.height
            
            // 判断是否需要换行
            if currentX + tagWidth > availableWidth {
                currentY += currentLineMaxHeight + verticalSpacing
                currentX = contentInsets.left
                currentLineMaxHeight = 0
            }
            
            // 设置标签frame
            tag.frame = CGRect(x: currentX, y: currentY, width: tagWidth, height: tagHeight)
            addSubview(tag)
            
            // 更新当前行状态
            currentX += tagWidth + horizontalSpacing
            currentLineMaxHeight = max(currentLineMaxHeight, tagHeight)
        }
        
        // 调整容器自身高度
        let totalHeight = currentY + currentLineMaxHeight + contentInsets.bottom
        frame = CGRect(x: frame.origin.x, y: frame.origin.y, width: frame.width, height: totalHeight)
    }
}

2. 给标签添加内边距（优化显示） #

extension UILabel {
    private struct AssociatedKeys {
        static var padding = UIEdgeInsets()
    }
    
    // 标签内边距，控制文字和边框的间距
    var padding: UIEdgeInsets {
        get {
            return objc_getAssociatedObject(self, &AssociatedKeys.padding) as? UIEdgeInsets ?? .zero
        }
        set {
            objc_setAssociatedObject(self, &AssociatedKeys.padding, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
            invalidateIntrinsicContentSize()
        }
    }
    
    override func drawText(in rect: CGRect) {
        super.drawText(in: rect.inset(by: padding))
    }
    
    override var intrinsicContentSize: CGSize {
        let originalSize = super.intrinsicContentSize
        return CGSize(
            width: originalSize.width + padding.left + padding.right,
            height: originalSize.height + padding.top + padding.bottom
        )
    }
}

3. 在卡片中使用容器 #

// 示例：创建一组标签
func createTags() -> [UILabel] {
    let tagTexts = ["热门", "iOS开发", "Swift", "很长很长的测试标签内容", "UI布局", "性能优化"]
    return tagTexts.map { text in
        let label = UILabel()
        label.text = text
        label.font = UIFont.systemFont(ofSize: 14)
        label.textColor = UIColor.darkText
        label.backgroundColor = UIColor.systemGray5
        label.layer.cornerRadius = 12
        label.clipsToBounds = true
        label.padding = UIEdgeInsets(top: 4, left: 8, bottom: 4, right: 8) // 设置内边距
        return label
    }
}

// 在卡片视图中添加标签容器
let cardWidth: CGFloat = 300 // 卡片的宽度
let tagContainer = FlowTagContainerView(frame: CGRect(x: 0, y: 20, width: cardWidth, height: 0))
tagContainer.reload(with: createTags())
cardView.addSubview(tagContainer)

关键优势 #

• 纯手动frame布局，适配旧版本iOS系统，无需AutoLayout
• 轻量级计算，仅遍历标签计算位置，不会像CollectionView那样产生额外性能开销
• 可灵活调整间距、内边距、标签样式，完全满足你的卡片标签布局需求

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