適用於 macOS 和 iOS 的 Form 中兩行中“評級”視圖的 SwiftUI 對齊

Question

最初為 macOS 和 iOS 編寫一個多平台應用程序，它使用主詳細視圖結構，在詳細視圖中是一個Form和許多Section ，其中一個包含兩個結構，代表用戶對（食物）的享受和消費評級。

這是享受評級的代碼......

struct Rating: View {
    
    @Environment(\.colorScheme) var colourScheme
    @Binding var rating: Int
    
    var body: some View {
        HStack {
            Text("Enjoyment")
                .padding(.trailing, 12.0)
#if os(iOS)
            Spacer()
#endif
            ForEach(0..<5) { counter in
                Image(systemName: rating > counter ? "star.fill" : "star")
                    .onTapGesture(count: 1) {
                        if rating == 1 {
                            rating = 0
                        }
                        else {
                            rating = counter + 1
                        }
                    }
                    // this line for image system name = "circle.fill" : "circle"
                    //.padding(.trailing, counter != 4 ? 2.5 : 0) 
            }
            .shadow(color: colourScheme == .light ? .gray : .white, radius: colourScheme == .light ? 1.0 : 2.0, x: 0, y: 0)
        }
        .foregroundColor(Color.accentColor)
    }
}

消費等級非常相似，只是有細微的變化。

到目前為止，這些在 iOS 上看起來不錯，因為（僅限 iOS）Spacer() 將每個Rating視圖推到行的右側或后邊緣，並且我對圓形圖像的 .padding 修飾符 hack 使每個圖像之間的間距“大約正確”。

雖然我正在努力弄清楚如何對齊 macOS 目標的“點”，但我也在努力弄清楚如何以編程方式對齊每個圖像，以便如果我更改圖像，對齊將起作用。

請參閱下面的屏幕截圖（說明五個Image如何不對齊）。

IOS

蘋果系統

我已經閱讀了一些關於.alignmentGuide修飾符的博客，包括 Majid Jabrayilov 的SwiftUI 中的對齊指南。

這似乎是我應該走的路，但我一直在嘗試解決這個問題。

Answer 1

我在標簽和評級控件之間添加了關於Spacer()使用的評論，但單獨查看處理控件本身是值得的。

首先，現在您依賴於與標簽共享 HStack 的五個元素，並在循環中使用條件填充邏輯來控制元素之間的間距。

如果您為評級元素提供自己的 HStack，那部分會更容易。 這樣，元素之間的間距可以使用堆棧的spacing屬性來確定，而不必擔心您是否在最后一次循環迭代中。 例如：

HStack(spacing: 2.5) {
  ForEach(0..<5) {
    Image(systemName: "circle")
    // etc.
  }
}

在對齊評級視圖的子元素方面，無論使用什么符號，它們都與下面的類似視圖對齊，您可以將每個子元素的框架寬度限制為相同，無論它們顯示什么圖像.

您可以通過向循環中的每個子元素添加一個.frame()修飾符來實現這一點：

HStack {
  ForEach(0..<5) {
    Image(systemName: "xxx")
      .frame(width: 40, alignment: .center)
  }
}

您顯然需要選擇一個適合您的寬度 - 您也可以將其與 HStack 上的spacing屬性混合使用。