SwiftUI实现ForEach+HStack不超出容器范围的方案问询

需要实现单元格内包含进度条的设计，但当前当ForEach迭代数量较多（如50个）时，HStack会超出屏幕范围。期望达成以下效果：

• 单元格不超出容器范围
• Text 1和Text 2分别居左右两侧
• 进度条项较少时文本保持最小宽度
  不希望通过计算ForEach的最大项数来控制，希望直接裁剪超出的图表部分。

当前实现代码：

struct Row: View {
    var body: some View {
        HStack(alignment: .bottom, spacing: 0) {
            Circle()
                .fill(.black)
                .frame(width: 41, height: 41)
                .padding(.trailing, 16)

            HStack {
                VStack(alignment: .leading, spacing: 8) {
                    Text("Text")
                        .font(.bodyS)

                    HStack(spacing: 12) {
                        Circle()
                            .fill(.black)
                            .frame(width: 40, height: 40)

                        VStack(alignment: .leading, spacing: 0) {
                            HStack(alignment: .bottom, spacing: 3) {
                                ForEach(0 ..< 20) { _ in
                                    RoundedRectangle(cornerRadius: 2)
                                        .frame(width: 3, height: 10)
                                }
                            }

                            HStack(spacing: 8) {
                                Text("Text 1")
                                    .fixedSize()
                                Spacer(minLength: 0)
                                Text("Text 2")
                                    .fixedSize()
                            }
                            .font(.bodyS)
                        }
                    }
                    .padding(.all, 16)
                    .background(
                        RoundedRectangle(cornerRadius: 16)
                            .fill(.gray)
                    )
                }
            }
            Spacer(minLength: 0)
                .layoutPriority(1)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(.horizontal, 24)
    }
}

struct Row_Preview: PreviewProvider {
    static var previews: some View {
        ScrollView {
            LazyVStack {
                Row()
            }
        }
    }
}

通过以下修改实现需求：

1. 给进度条所在的HStack添加宽度限制和裁剪属性，直接截断超出容器的部分
2. 调整文本区域的布局层级，确保左右文本能正确对齐
3. 简化多余的嵌套布局，避免不必要的宽度扩张

修改后的代码：

struct Row: View {
    var body: some View {
        HStack(alignment: .bottom, spacing: 0) {
            Circle()
                .fill(.black)
                .frame(width: 41, height: 41)
                .padding(.trailing, 16)

            VStack(alignment: .leading, spacing: 8) {
                Text("Text")
                    .font(.bodyS)

                HStack(spacing: 12) {
                    Circle()
                        .fill(.black)
                        .frame(width: 40, height: 40)

                    VStack(alignment: .leading, spacing: 0) {
                        // 限制进度条容器宽度并裁剪超出部分
                        HStack(alignment: .bottom, spacing: 3) {
                            ForEach(0 ..< 50) { _ in
                                RoundedRectangle(cornerRadius: 2)
                                    .frame(width: 3, height: 10)
                            }
                        }
                        .frame(maxWidth: .infinity)
                        .clipped()

                        HStack(spacing: 8) {
                            Text("Text 1")
                                .fixedSize()
                            Spacer(minLength: 0)
                            Text("Text 2")
                                .fixedSize()
                        }
                        .font(.bodyS)
                    }
                    .frame(maxWidth: .infinity) // 让文本区域占满剩余宽度，保证Spacer生效
                }
                .padding(.all, 16)
                .background(
                    RoundedRectangle(cornerRadius: 16)
                        .fill(.gray)
                )
            }
            .frame(maxWidth: .infinity) // 确保整个内容块不超出容器
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(.horizontal, 24)
    }
}

struct Row_Preview: PreviewProvider {
    static var previews: some View {
        ScrollView {
            LazyVStack {
                Row()
            }
        }
    }
}

关键修改说明： #

• frame(maxWidth: .infinity) 强制进度条容器的宽度不超过父容器范围，避免无限扩张
• clipped() 直接裁剪超出容器的进度条元素，无需提前计算最大项数
• 给包含文本的VStack设置maxWidth: .infinity，确保Spacer能推动Text2到右侧，同时进度条项较少时文本区域自动保持最小宽度

内容的提问来源于stack exchange，提问作者sliwinski.lukas