'Baseline alignment of buttons in SwiftUI on macOS

I’m trying to vertically align a Text and a regular Button along their baselines in SwiftUI on macOS. I basically want to replicate this layout from the WiFi preference pane:

macOS WiFi Preference Pane - Alignment Layout

I expected that putting the said controls into an HStack with the alignment set to .firstTextBaseline would produce this layout. While this is the case for many other controls, it doesn’t seem to work with non-plain buttons. See the following example:

HStack(alignment: .firstTextBaseline) {
    Text("Text")
    
    Text("Large Text")
        .font(.title)
    
    Button {} label: {
        Text("Button")
    }
    
    Button {} label: {
        Text("Borderless")
    }
    .buttonStyle(.borderless)
    
    Button {} label: {
        Text("Plain")
    }
    .buttonStyle(.plain)
    
    Toggle("Toggle", isOn: .constant(true))
    
    Picker("Picker", selection: .constant(0)) {
        Text("One").tag(0)
        Text("Two").tag(1)
        Text("Three").tag(2)
    }
    .pickerStyle(.radioGroup)
}
.padding()

HStack Baseline Alignment

Am I holding it wrong? Is there a way to levere the baselines just like in AppKit, or do I have to position the button manually?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source