SwiftUI嵌套H/VStack实现自定义评分视图出现异常frame问题

• GeometryReader默认会撑满父视图分配的所有可用空间，你仅为内部的圆角矩形设置了15pt高度，未限制GeometryReader本身的高度，也未设置内容对齐规则，导致GeometryReader占满了父容器的垂直空间，多余部分留空，就是你观察到的多余frame区域。
• 星星容器的多余高度来自你给每个星星Image添加的不必要的.padding(.bottom)修饰符，底部边距撑大了星星容器的整体尺寸。
• 多余的视图嵌套（GeometryReader外层无意义的HStack、VStack）也会干扰布局计算，进一步放大布局异常问题。

import SwiftUI

struct Ratings: Identifiable {
    var id = UUID().uuidString
    var ratingCount: CGFloat
    var starCount: Int
}

struct RatingGraphView: View {
    var ratings: [Ratings] = [
        Ratings(ratingCount: 130, starCount: 5),
        Ratings(ratingCount: 90, starCount: 4),
        Ratings(ratingCount: 25, starCount: 3),
        Ratings(ratingCount: 20, starCount: 2),
        Ratings(ratingCount: 3, starCount: 1)
    ]
    
    var body: some View {
        VStack(spacing: 12) {
            ForEach(ratings) { rating in
                RatingView(rating: rating)
            }
        }
        .padding(.vertical)
        .frame(height: 200)
    }
    
    @ViewBuilder
    func RatingView(rating: Ratings)->some View {
        HStack(spacing: 16) {
            // 星星区域
            HStack(spacing: 2) {
                ForEach(1..<rating.starCount+1, id: \.self) { _ in
                    Image(systemName: "star.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(height: 15)
                }
            }
            .frame(width: 80, alignment: .trailing)
            
            // 进度条区域
            GeometryReader { proxy in
                RoundedRectangle(cornerRadius: 6)
                    .fill(Color.blue)
                    .frame(width: (rating.ratingCount / getMax()) * proxy.size.width, height: 15)
            }
            .frame(height: 15) // 固定GeometryReader高度，避免撑满
        }
        .padding(.horizontal)
    }
    
    func getMax()->CGFloat {
        ratings.max { $0.ratingCount < $1.ratingCount }?.ratingCount ?? 0
    }
}

struct RatingGraphView_Previews: PreviewProvider {
    static var previews: some View {
        RatingGraphView()
    }
}

• 移除了星星Image多余的.padding(.bottom)修饰符
• 给GeometryReader添加了固定高度15pt，和内部进度条高度保持一致
• 清理了多余的嵌套视图，简化布局层级
• 固定了星星区域的宽度，避免布局伸缩时出现对齐异常
• 给范围ForEach添加了id参数，消除编译警告

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