SwiftUI开发TagsView组件时标签侧边文字被截断问题排查

• 宽度计算遗漏了必要的间距：仅统计了文本本身的宽度，没有包含每个标签左右padding()的宽度、HStack内标签之间的默认间距、外层VStack的左右边距，导致计算出来的行总宽度远小于实际渲染宽度，超出屏幕范围就被截断。
• 直接取屏幕宽度作为可用宽度不准确：ScrollView、父容器的边距都会压缩实际可用宽度，不能直接用UIScreen.main.bounds.width做计算基准。
• UILabel的尺寸和SwiftUI Text的渲染尺寸不匹配：两者默认字体参数可能不一致，计算出来的文本宽度存在误差。

调整分组计算逻辑，把所有额外间距都算入总宽度，同时统一测量和渲染的字体参数，修正后的完整代码如下：

struct TagsView: View {
    let items: [String]
    var backgroundColor: Color
    var foregroundColor: Color
    // 可自定义的布局参数
    private let tagHPadding: CGFloat = 16 // 标签左右padding总和
    private let tagSpacing: CGFloat = 8 // HStack内标签之间的间距
    private let containerHPadding: CGFloat = 16 // 外层容器左右padding总和
    
    var groupedItems: [[String]] = [[String]]()
    
    init(items: [String], backgroundColor: Color = Color.blue, foregroundColor: Color = Color.white) {
        self.items = ["iusto", "assumenda", "hic", "omnis", "labore", "dolorem", "aut", "aliquam", "voluptatibus", "et", "placeat", "soluta", "qui", "voluptatibus", "possimus", "velit", "eaque", "commodi", "dolor", "dicta", "cum", "aperiam", "hic", "maxime", "mollitia", "itaque", "molestiae", "nemo", "eligendi", "unde", "tempore", "sit", "velit", "qui", "ut", "praesentium", "fugit", "velit", "error", "aut", "nulla", "est", "est", "similique", "aut", "laborum", "dolorem", "voluptatem", "nobis", "quaerat"]
        self.backgroundColor = backgroundColor
        self.foregroundColor = foregroundColor
        // 计算实际可用宽度 = 屏幕宽度 - 容器左右padding
        let availableWidth = UIScreen.main.bounds.width - containerHPadding
        groupedItems = createGroupedItems(items, availableWidth: availableWidth)
    }
    
    private func createGroupedItems(_ items: [String], availableWidth: CGFloat) -> [[String]] {
        var groupedItems: [[String]] = []
        var tempItems: [String] = []
        var currentRowWidth: CGFloat = 0
        // 和SwiftUI默认Text字体保持一致，保证宽度计算准确
        let font = UIFont.systemFont(ofSize: 16)
        
        for word in items {
            // 计算单个标签的总宽度：文本宽度 + 标签左右padding
            let textWidth = word.size(withAttributes: [.font: font]).width
            let tagTotalWidth = textWidth + tagHPadding
            
            // 行内第一个标签不需要加标签间距，其余标签需要额外算上间距宽度
            let addWidth = tempItems.isEmpty ? tagTotalWidth : tagTotalWidth + tagSpacing
            
            if currentRowWidth + addWidth < availableWidth {
                currentRowWidth += addWidth
                tempItems.append(word)
            } else {
                groupedItems.append(tempItems)
                tempItems.removeAll()
                tempItems.append(word)
                currentRowWidth = tagTotalWidth
            }
        }
        // 加入最后一行的剩余标签
        if !tempItems.isEmpty {
            groupedItems.append(tempItems)
        }
        return groupedItems
    }
    
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 8) {
                ForEach(groupedItems, id: \.self) { subWords in
                    // 显式设置标签间距，和计算逻辑对齐
                    HStack(spacing: tagSpacing) {
                        ForEach(subWords, id: \.self) { word in
                            Text(word)
                                .fixedSize()
                                .padding(.horizontal, tagHPadding/2)
                                .padding(.vertical, 8)
                                .background(backgroundColor)
                                .foregroundColor(foregroundColor)
                                .clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
                        }
                    }
                }
                Spacer()
            }
            .padding(.horizontal, containerHPadding/2)
        }
    }
}

• 如果需要适配横竖屏或者不同父容器尺寸，可以用GeometryReader获取实际可用宽度，代替硬编码的屏幕宽度计算，适配性更强。
• SwiftUI 3.0及以上版本可以直接用LazyHGrid配合自适应网格尺寸实现标签流布局，无需自行编写分组算法，稳定性更高。

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