SwiftUI 多平台Form中两行rating视图的iOS与macOS对齐问题

你遇到的对齐问题核心是两行评分视图的左侧标签宽度不统一，导致右侧图标容器的起始位置不一致。以下是可直接落地的实现方案，同时满足双端对齐、更换图标无需额外调整的需求：

方案一：自定义对齐指南（推荐，适配任意长度标签） #

步骤1：定义自定义对齐基准 #

首先创建全局的水平对齐ID，作为所有评分行图标的统一对齐基准：

extension HorizontalAlignment {
    private enum RatingIconLeading: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.leading]
        }
    }
    static let ratingIconLeading = HorizontalAlignment(RatingIconLeading.self)
}

步骤2：重构可复用评分组件 #

把标签文本抽为入参，避免重复编写两个评分结构体，同时添加对齐配置：

struct Rating: View {
    @Environment(\.colorScheme) var colourScheme
    @Binding var rating: Int
    /// 评分项标签，传入「享受度」「食用量」即可
    let label: String
    /// 单张图标固定尺寸，后续换图标可直接修改此参数
    private let iconSize: CGFloat = 20
    /// 图标之间的固定间距
    private let iconSpacing: CGFloat = 4
    
    var body: some View {
        HStack(alignment: .center, spacing: 12) {
            Text(label)
                // 将标签的右边缘对齐自定义基准线
                .alignmentGuide(.ratingIconLeading) { dim in
                    dim[.trailing]
                }
            
            #if os(iOS)
            Spacer()
            #endif
            
            // 统一图标容器布局
            HStack(spacing: iconSpacing) {
                ForEach(0..<5) { counter in
                    Image(systemName: rating > counter ? "star.fill" : "star")
                    // 固定每张图标尺寸，换图无需调整布局
                        .frame(width: iconSize, height: iconSize)
                    // 扩大点击热区，避免小图标点击无响应
                        .contentShape(Rectangle())
                        .onTapGesture {
                            rating = rating == counter + 1 ? 0 : counter + 1
                        }
                }
            }
            .shadow(
                color: colourScheme == .light ? .gray : .white,
                radius: colourScheme == .light ? 1 : 2
            )
        }
        .foregroundColor(.accentColor)
    }
}

步骤3：父容器应用对齐规则 #

在你放置两个评分视图的Section中，使用自定义对齐规则：

Section {
    // 父容器指定所有子项对齐自定义基准
    VStack(alignment: .ratingIconLeading, spacing: 16) {
        Rating(rating: $enjoymentRating, label: "享受度")
        Rating(rating: $amountRating, label: "食用量")
    }
}

方案二：固定标签宽度（更简单，适合标签长度固定的场景） #

如果你的评分项标签长度不会发生变化，也可以用更简单的固定宽度方案，无需自定义对齐：
只需给Rating组件内的Text标签添加固定宽度即可：

Text(label)
    .frame(width: 80, alignment: .leading) // 宽度可根据最长标签的实际渲染宽度调整

两种方案都可以同时解决macOS端对齐异常、更换图标无需手动调整间距的需求。

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