如何在SwiftUI中实现`float: left`或`flex-wrap`布局效果？

针对你需要的可变宽度文本块、自动换行、垂直扩展的布局需求，以下是两种适配不同iOS版本的实现方案：

方案一：iOS16+ 原生自定义流式布局（推荐） #

利用SwiftUI 3.0引入的Layout协议，自定义流式布局逻辑，无需依赖第三方库，代码简洁高效。

自定义FlowLayout实现 #

import SwiftUI

struct FlowLayout: Layout {
    // 文本块之间的间距，可自定义
    var spacing: CGFloat = 8
    
    // 计算布局整体尺寸
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let maxAvailableWidth = proposal.width ?? .infinity
        var currentLineWidth: CGFloat = 0
        var totalHeight: CGFloat = 0
        var currentLineHeight: CGFloat = 0
        
        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            // 检查当前行是否容纳不下新的文本块
            if currentLineWidth + subviewSize.width + spacing > maxAvailableWidth, currentLineWidth > 0 {
                totalHeight += currentLineHeight + spacing
                currentLineWidth = subviewSize.width + spacing
                currentLineHeight = subviewSize.height
            } else {
                currentLineWidth += subviewSize.width + spacing
                currentLineHeight = max(currentLineHeight, subviewSize.height)
            }
        }
        // 加上最后一行的高度
        totalHeight += currentLineHeight
        return CGSize(width: min(currentLineWidth - spacing, maxAvailableWidth), height: totalHeight)
    }
    
    // 放置子视图的位置
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let maxWidth = bounds.width
        var xOffset = bounds.minX
        var yOffset = bounds.minY
        var currentLineHeight: CGFloat = 0
        
        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            // 换行判断
            if xOffset + subviewSize.width > maxWidth, xOffset > bounds.minX {
                yOffset += currentLineHeight + spacing
                xOffset = bounds.minX
                currentLineHeight = subviewSize.height
            } else {
                currentLineHeight = max(currentLineHeight, subviewSize.height)
            }
            // 放置当前文本块
            subview.place(at: CGPoint(x: xOffset, y: yOffset), proposal: ProposedViewSize(subviewSize))
            xOffset += subviewSize.width + spacing
        }
    }
}

使用示例 #

struct ContentView: View {
    // 示例文本列表，可替换为你的数据
    let textItems = ["SwiftUI", "流式布局", "可变宽度", "自动换行", "垂直扩展", "标签云", "自定义Layout"]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("可变宽度自动换行文本块")
                .font(.title)
                .padding(.horizontal)
            
            FlowLayout(spacing: 12) {
                ForEach(textItems, id: \.self) { text in
                    Text(text)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 8)
                        .background(Color.blue.opacity(0.2))
                        .cornerRadius(20)
                        .font(.system(size: 16))
                }
            }
            .padding(.horizontal)
        }
        .padding(.vertical)
    }
}

方案说明 #

• 文本块宽度由自身内容自动决定，实现可变宽度需求
• 当一行空间不足时自动换行，布局整体高度随内容自动扩展
• 通过调整spacing参数可控制文本块之间的间距
• 仅支持iOS16及以上版本，是SwiftUI原生的最优解

方案二：iOS13+ 兼容低版本的流式布局 #

如果需要兼容iOS15及以下版本，可通过包装UIKit的UICollectionView实现流式布局。

包装UICollectionView实现 #

import SwiftUI
import UIKit

// SwiftUI包装的流式CollectionView
struct FlowCollectionView: UIViewRepresentable {
    let textItems: [String]
    let spacing: CGFloat = 12
    let itemPadding: UIEdgeInsets = .init(top: 8, left: 16, bottom: 8, right: 16)
    
    func makeUIView(context: Context) -> UICollectionView {
        let layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = spacing
        layout.minimumInteritemSpacing = spacing
        layout.sectionInset = .init(top: 8, left: 16, bottom: 8, right: 16)
        
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.backgroundColor = .clear
        collectionView.register(FlowTextCell.self, forCellWithReuseIdentifier: "FlowTextCell")
        collectionView.dataSource = context.coordinator
        return collectionView
    }
    
    func updateUIView(_ uiView: UICollectionView, context: Context) {
        uiView.reloadData()
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
        let parent: FlowCollectionView
        
        init(_ parent: FlowCollectionView) {
            self.parent = parent
        }
        
        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            parent.textItems.count
        }
        
        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FlowTextCell", for: indexPath) as! FlowTextCell
            let text = parent.textItems[indexPath.item]
            cell.configure(with: text)
            return cell
        }
        
        // 动态计算单元格宽度
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            let text = parent.textItems[indexPath.item]
            let font = UIFont.systemFont(ofSize: 16)
            let textSize = text.size(withAttributes: [.font: font])
            return CGSize(
                width: textSize.width + parent.itemPadding.left + parent.itemPadding.right,
                height: textSize.height + parent.itemPadding.top + parent.itemPadding.bottom
            )
        }
    }
}

// 自定义CollectionView单元格
class FlowTextCell: UICollectionViewCell {
    private let textLabel = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configure(with text: String) {
        textLabel.text = text
    }
    
    private func setupUI() {
        contentView.addSubview(textLabel)
        textLabel.translatesAutoresizingMaskIntoConstraints = false
        textLabel.backgroundColor = UIColor.blue.withAlphaComponent(0.2)
        textLabel.layer.cornerRadius = 20
        textLabel.clipsToBounds = true
        textLabel.font = .system(size: 16)
        textLabel.textAlignment = .center
        
        NSLayoutConstraint.activate([
            textLabel.topAnchor.constraint(equalTo: contentView.topAnchor),
            textLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            textLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            textLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
}

使用示例 #

struct ContentView: View {
    let textItems = ["SwiftUI", "流式布局", "可变宽度", "自动换行", "垂直扩展", "兼容iOS13+"]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("兼容低版本的流式文本块")
                .font(.title)
                .padding(.horizontal)
            
            FlowCollectionView(textItems: textItems)
                .padding(.horizontal)
                .frame(minHeight: 100)
        }
        .padding(.vertical)
    }
}

方案说明 #

• 通过UIKit的UICollectionViewFlowLayout实现流式布局，兼容iOS13及以上版本
• 每个单元格宽度根据文本内容动态计算，支持可变宽度和自动换行
• 布局高度随内容自动扩展，满足垂直方向的自适应需求

内容的提问来源于stack exchange，提问作者János