SwiftUI如何检测View是否超出屏幕 溢出时显示+n计数提示

实现思路 #

• 先获取Tag列表容器的可用最大宽度，作为超出判断的基准
• 遍历所有标签，累加每个标签的实际宽度和标签间距，累计值超过容器宽度时即判定为超出
• 超出部分的标签不渲染，末尾统一展示+N的计数标签

完整代码 #

1. 宽度获取用PreferenceKey #

struct ContainerWidthPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

2. TagCell实现 #

struct TagCell: View {
    var tag: String
    var body: some View {
        Text(tag)
            .fixedSize()
            .foregroundColor(.yellow)
            .padding(8)
            .background(Color.yellow.opacity(0.15))
            .cornerRadius(15)
    }
}

3. 支持超出计数的TagListView实现 #

struct TagListView: View {
    var tags = ["iPhone X", "iPhone 11", "iPhone 12", "iPhone 12 Pro Max"]
    // 标签之间的间距
    private let tagSpacing: CGFloat = 8
    // 容器可用宽度
    @State private var containerWidth: CGFloat = 0
    // 超出的标签数量
    @State private var overflowCount: Int = 0
    // 存储所有已渲染标签的宽度
    @State private var tagWidths: [CGFloat] = []
    
    var body: some View {
        VStack {
            HStack(spacing: tagSpacing) {
                ForEach(Array(tags.enumerated()), id: \.offset) { index, tag in
                    if index < tags.count - overflowCount {
                        TagCell(tag: tag)
                            .background(
                                GeometryReader { geo in
                                    Color.clear
                                        .onAppear {
                                            let currentWidth = geo.size.width
                                            if tagWidths.count <= index {
                                                tagWidths.append(currentWidth)
                                            }
                                            // 计算当前累计宽度：所有前置标签宽度+总间距
                                            let totalWidth = tagWidths.reduce(0, +) + CGFloat(tagWidths.count - 1) * tagSpacing
                                            if totalWidth > containerWidth {
                                                overflowCount = tags.count - index
                                            }
                                        }
                                }
                            )
                    }
                }
                if overflowCount > 0 {
                    TagCell(tag: "+\(overflowCount)")
                }
            }
            .background(
                // 获取HStack容器的可用宽度
                GeometryReader { geo in
                    Color.clear
                        .preference(key: ContainerWidthPreferenceKey.self, value: geo.size.width)
                }
            )
            .onPreferenceChange(ContainerWidthPreferenceKey.self) { value in
                containerWidth = value
                // 容器宽度变化时重置状态重新计算
                overflowCount = 0
                tagWidths.removeAll()
            }
        }
        .padding()
    }
}

注意事项 #

• 标签的内边距、圆角等样式修改后不需要调整判断逻辑，方案直接读取渲染后的实际宽度做计算
• 如果标签列表嵌套在可滚动容器中，只需要把读取宽度的GeometryReader挂载到你定义的边界容器上即可，无需修改核心判断逻辑
• 本方案适配动态标签列表、横竖屏切换等容器宽度变化的场景

内容的提问来源于stack exchange，提问作者Ufuk Köşker