如何在添加至HStack前检查视图尺寸，实现限宽Chip布局

问题分析 #

原代码尝试用PreferenceKey实时累加Chip宽度，但这种方式依赖视图渲染后的尺寸回调，无法在布局前准确判断哪些Chip能放入指定宽度（屏幕的2/3），容易出现布局偏差或循环更新的问题。我们需要提前计算所有Chip的尺寸，再确定可容纳的数量，最后渲染Chip和剩余计数。

解决方案 #

1. 预计算Chip尺寸（推荐方案） #

通过UIKit的UILabel模拟计算每个Chip的宽度（包含内边距、字体等样式），确保在布局前就能得到准确尺寸，避免依赖SwiftUI渲染后的回调。

2. 计算可容纳数量 #

基于屏幕2/3的宽度，累加Chip尺寸（包含Chip间的间距），直到超过阈值，统计可显示的数量，剩余数量用+N标识。

3. 完整实现代码 #

import SwiftUI

struct ChipView: View {
    let tags: [String]
    // 可根据需求调整Chip样式参数
    private let chipFont: UIFont = .systemFont(ofSize: 14)
    private let chipHorizontalPadding: CGFloat = 12
    private let chipVerticalPadding: CGFloat = 6
    private let chipSpacing: CGFloat = 8
    
    var body: some View {
        GeometryReader { g in
            let availableWidth = g.size.width * 2/3
            let chipWidths = tags.map { calculateChipTotalWidth(text: $0) }
            let (displayCount, remainingCount) = calculateDisplayableCount(availableWidth: availableWidth, widths: chipWidths)
            
            HStack(spacing: chipSpacing) {
                ForEach(0..<displayCount, id: \.self) { index in
                    customChipView(text: tags[index])
                }
                
                if remainingCount > 0 {
                    customChipView(text: "+\(remainingCount)")
                        .foregroundColor(.secondary)
                }
                
                Spacer()
            }
        }
    }
    
    // 计算单个Chip的总宽度（文本宽度+左右内边距）
    private func calculateChipTotalWidth(text: String) -> CGFloat {
        let label = UILabel()
        label.font = chipFont
        label.text = text
        let textWidth = label.intrinsicContentSize.width
        return textWidth + chipHorizontalPadding * 2
    }
    
    // 计算能放入指定宽度的Chip数量
    private func calculateDisplayableCount(availableWidth: CGFloat, widths: [CGFloat]) -> (Int, Int) {
        var totalWidth: CGFloat = 0
        var displayCount = 0
        
        for width in widths {
            // 累加当前Chip宽度 + 前一个Chip的间距（第一个Chip不需要加间距）
            let requiredWidth = totalWidth + width + (displayCount > 0 ? chipSpacing : 0)
            if requiredWidth <= availableWidth {
                totalWidth = requiredWidth
                displayCount += 1
            } else {
                break
            }
        }
        
        return (displayCount, tags.count - displayCount)
    }
    
    // 自定义Chip样式视图
    private func customChipView(text: String) -> some View {
        Text(text)
            .font(Font(chipFont))
            .padding(.horizontal, chipHorizontalPadding)
            .padding(.vertical, chipVerticalPadding)
            .background(Color.gray.opacity(0.2))
            .cornerRadius(16)
    }
}

// 预览示例
struct ChipView_Previews: PreviewProvider {
    static var previews: some View {
        ChipView(tags: ["SwiftUI", "iOS开发", "布局技巧", "自定义视图", "性能优化"])
            .padding()
    }
}

复杂Chip的替代方案（基于SwiftUI PreferenceKey） #

如果Chip包含图片等复杂元素，无法用UIKit预计算尺寸，可先渲染隐藏视图收集所有Chip尺寸，再计算并渲染最终视图：

import SwiftUI

// 用于收集所有Chip尺寸的PreferenceKey
struct ChipSizesPreferenceKey: PreferenceKey {
    static var defaultValue: [CGSize] = []
    
    static func reduce(value: inout [CGSize], nextValue: () -> [CGSize]) {
        value.append(contentsOf: nextValue())
    }
}

// 测量单个Chip尺寸的Modifier
struct MeasureChipSizeModifier: ViewModifier {
    func body(content: Content) -> some View {
        content.background(GeometryReader { geometry in
            Color.clear.preference(key: ChipSizesPreferenceKey.self,
                                 value: [geometry.size])
        })
    }
}

extension View {
    func measureChipSize() -> some View {
        self.modifier(MeasureChipSizeModifier())
    }
}

struct ComplexChipContainerView: View {
    let tags: [String]
    @State private var chipSizes: [CGSize] = []
    @State private var displayCount: Int = 0
    @State private var remainingCount: Int = 0
    private let chipSpacing: CGFloat = 8
    
    var body: some View {
        GeometryReader { g in
            VStack {
                if !chipSizes.isEmpty {
                    // 渲染最终视图
                    HStack(spacing: chipSpacing) {
                        ForEach(0..<displayCount, id: \.self) { index in
                            complexChipView(text: tags[index])
                        }
                        
                        if remainingCount > 0 {
                            complexChipView(text: "+\(remainingCount)")
                                .foregroundColor(.secondary)
                        }
                        
                        Spacer()
                    }
                } else {
                    // 先渲染隐藏视图收集所有Chip尺寸
                    HStack(spacing: chipSpacing) {
                        ForEach(tags, id: \.self) { tag in
                            complexChipView(text: tag)
                                .measureChipSize()
                        }
                    }
                    .hidden()
                    .onPreferenceChange(ChipSizesPreferenceKey.self) { sizes in
                        chipSizes = sizes
                        let availableWidth = g.size.width * 2/3
                        let (count, remaining) = calculateDisplayableCount(availableWidth: availableWidth, widths: sizes.map { $0.width })
                        displayCount = count
                        remainingCount = remaining
                    }
                }
            }
        }
    }
    
    // 复用之前的数量计算逻辑
    private func calculateDisplayableCount(availableWidth: CGFloat, widths: [CGFloat]) -> (Int, Int) {
        var totalWidth: CGFloat = 0
        var displayCount = 0
        
        for width in widths {
            let requiredWidth = totalWidth + width + (displayCount > 0 ? chipSpacing : 0)
            if requiredWidth <= availableWidth {
                totalWidth = requiredWidth
                displayCount += 1
            } else {
                break
            }
        }
        
        return (displayCount, tags.count - displayCount)
    }
    
    // 带图标的复杂Chip视图示例
    private func complexChipView(text: String) -> some View {
        HStack(spacing: 4) {
            Image(systemName: "tag.fill")
                .font(.system(size: 12))
            Text(text)
                .font(.system(size: 14))
        }
        .padding(.horizontal, 10)
        .padding(.vertical, 5)
        .background(Color.blue.opacity(0.1))
        .cornerRadius(12)
    }
}

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