在 SwiftUI 視圖中對齊切換

Question

我有此代碼，其中包含下面屏幕截圖中顯示的標簽和切換

 VStack(alignment: .leading) {
            HStack() {
                Text("Autostart:")
                    .font(.custom("SFProText-Medium", size: 12))
                
                Toggle("Launch on Login", isOn: $launchAtLogin).onChange(of: launchAtLogin) { newValue in
                    LaunchAtLogin.isEnabled = newValue
                    
                    if !isLoginItem() {
                        updateUserDefaults(key: "LaunchOnLogin", value: LaunchAtLogin.isEnabled)
                    }
                }.font(.custom("SFProText-Medium", size: 12))
            }
            .padding(.top, 10)
            .padding(.bottom, 10)
            
            HStack() {
                Text("Updates:")
                    .font(.custom("SFProText-Medium", size: 12))
                Toggle("Allow Automatic Updates", isOn: $allowAutomaticUpdates).onChange(of: allowAutomaticUpdates) { newValue in
                    allowAutomaticUpdates = newValue
                    updateUserDefaults(key: "AllowsAutomaticUpdates", value: allowAutomaticUpdates)
                }.font(.custom("SFProText-Medium", size: 12))
            }
        }
        .padding(.top, 10)
        .padding(.bottom, 10)

我想弄清楚如何讓兩個切換開關始終垂直對齊。 我嘗試手動設置它們的幀大小，並將它們包裝在另一個 VStack 中，但這些似乎都不起作用

Answer 1

處理此問題的一種方法是定義自定義水平 alignment 指南，如下所示：

extension HorizontalAlignment {
    enum CustomAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[HorizontalAlignment.center]
        }
    }
    
    static let custom = HorizontalAlignment(CustomAlignment.self)
}

然后將其用作外部VStack的 alignment 參數。 要對齊Text中文本標簽的后緣， HStacks使用修飾符

.alignmentGuide(.custom) { d in d[HorizontalAlignment.trailing] }

把這一切放在一起……

VStack(alignment: .custom) {
    HStack() {
        Text("Autostart:")
            .alignmentGuide(.custom) { d in d[HorizontalAlignment.trailing] }

        Toggle("Launch on Login", isOn: $launchAtLogin)
            .onChange(of: launchAtLogin) { _ in
        }
    }
    HStack() {
        Text("Updates:")
            .alignmentGuide(.custom) { d in d[HorizontalAlignment.trailing] }
        Toggle("Allow Automatic Updates", isOn: $allowAutomaticUpdates)
            .onChange(of: allowAutomaticUpdates) { _ in
        }
    }
}
.font(.custom("SFProText-Medium", size: 12))
.padding()

給你…