Swift 如何实现动态生成按钮的类段落自动换行排列效果

手动链式Auto Layout适配低版本场景（兼容iOS 12+） #

直接把容器视图作为按钮的父视图，通过记录上一个按钮、当前行首按钮的引用做约束衔接，不需要额外引入第三方组件。

• 提前固定布局常量：按钮水平间距、行间距、容器左右边距
• 添加按钮前先清空容器内的旧控件，避免重复添加
• 每个按钮添加时关闭自动布局转换，通过判断累计宽度是否超过容器可用宽度，决定是同排衔接还是换行对齐

对应整合到现有代码的实现：

func buildTopicButtons(with topics: [Topic]) {
    // 固定布局参数
    let horizontalSpacing: CGFloat = 8
    let verticalSpacing: CGFloat = 12
    let containerHorizontalPadding: CGFloat = 16
    
    // 清空容器旧内容
    buttonsContainerView.subviews.forEach { $0.removeFromSuperview() }
    
    var previousButton: TopicButton?
    var firstButtonInCurrentRow: TopicButton?
    
    for (index, topic) in topics.enumerated() {
        let topicBut = TopicButton()
        // 原有按钮配置逻辑
        topicBut.setTitle(topic.topicName, for: .normal)
        topicBut.titleLabel?.font = UIFont(name: "MyFont", size: 15)
        topicBut.setTitleColor(UIColor(named: "myColor"), for: .normal)
        topicBut.backgroundColor = nil
        topicBut.tag = index
        topicBut.topicId = topic.topicId
        topicBut.translatesAutoresizingMaskIntoConstraints = false
        buttonsContainerView.addSubview(topicBut)
        
        // 绑定约束
        if index == 0 {
            NSLayoutConstraint.activate([
                topicBut.leadingAnchor.constraint(equalTo: buttonsContainerView.leadingAnchor, constant: containerHorizontalPadding),
                topicBut.topAnchor.constraint(equalTo: buttonsContainerView.topAnchor)
            ])
            firstButtonInCurrentRow = topicBut
        } else {
            guard let previous = previousButton else { continue }
            // 同排临时约束
            let sameRowLeading = topicBut.leadingAnchor.constraint(equalTo: previous.trailingAnchor, constant: horizontalSpacing)
            let sameRowTop = topicBut.topAnchor.constraint(equalTo: previous.topAnchor)
            
            // 判断是否需要换行
            let currentWidth = topicBut.intrinsicContentSize.width
            let occupiedWidth = firstButtonInCurrentRow!.frame.maxX + horizontalSpacing + currentWidth
            let availableWidth = buttonsContainerView.bounds.width - containerHorizontalPadding * 2
            
            if occupiedWidth > availableWidth {
                // 换行处理
                sameRowLeading.isActive = false
                sameRowTop.isActive = false
                NSLayoutConstraint.activate([
                    topicBut.leadingAnchor.constraint(equalTo: firstButtonInCurrentRow!.leadingAnchor),
                    topicBut.topAnchor.constraint(equalTo: previous.bottomAnchor, constant: verticalSpacing)
                ])
                firstButtonInCurrentRow = topicBut
            } else {
                // 同排排列
                NSLayoutConstraint.activate([sameRowLeading, sameRowTop])
            }
        }
        
        // 最后一个按钮撑开容器高度
        if index == topics.count - 1 {
            topicBut.bottomAnchor.constraint(equalTo: buttonsContainerView.bottomAnchor).isActive = true
        }
        
        // 绑定点击事件
        topicBut.addTarget(self, action: #selector(goToTopic(sender:)), for: .touchUpInside)
        previousButton = topicBut
    }
}

生产环境推荐方案：使用UICollectionView实现 #

将容器视图替换为配置好UICollectionViewFlowLayout的集合视图：

• 设置流式布局方向为纵向，自定义按钮水平间距、行间距、边距
• 注册对应按钮的Cell类，实现数据源方法渲染按钮内容
• 为每个Cell设置自适应内容的大小，由系统自动处理换行逻辑
  该方案布局稳定，不会出现手动约束的冲突问题，按钮数量动态变化时也能保持良好性能。

注意事项：

• 手动约束方案必须保证容器视图的宽度为确定值（比如关联到屏幕左右边距），按钮不要设置固定宽度约束，依靠intrinsicContentSize根据文字长短自适应。
• 如果需要实现示例中的带间隔点的文本流效果，可以在两个相邻按钮之间插入宽度为12pt的分隔Label，设置Label的文字为“·”，和按钮保持相同的垂直对齐关系，一起参与换行逻辑。

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