Created
February 17, 2021 22:54
-
-
Save marcprux/afd2f80baa5b6d60865182a828e83586 to your computer and use it in GitHub Desktop.
Example of aligning labels in SwiftUI.Form on macOS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// FormDemoApp.swift | |
// FormDemo | |
// | |
// Created by Marc Prud'hommeaux | |
// | |
import SwiftUI | |
@main | |
struct FormDemoApp: App { | |
var body: some Scene { | |
WindowGroup { | |
ContentView() | |
} | |
} | |
} | |
/// Alignment guide for aligning a text field in a `Form`. | |
/// Thanks for Jim Dovey https://developer.apple.com/forums/thread/126268 | |
extension HorizontalAlignment { | |
private enum ControlAlignment: AlignmentID { | |
static func defaultValue(in context: ViewDimensions) -> CGFloat { | |
return context[HorizontalAlignment.center] | |
} | |
} | |
static let controlAlignment = HorizontalAlignment(ControlAlignment.self) | |
} | |
public extension View { | |
/// Attaches a label to this view for laying out in a `Form` | |
/// - Parameter view: the label view to use | |
/// - Returns: an `HStack` with an alignment guide for placing in a form | |
func formLabel<V: View>(_ view: V) -> some View { | |
HStack { | |
view | |
self | |
.alignmentGuide(.controlAlignment) { $0[.leading] } | |
} | |
.alignmentGuide(.leading) { $0[.controlAlignment] } | |
} | |
} | |
struct ContentView: View { | |
var body: some View { | |
Form { | |
TextField("Text Field", value: .constant(""), formatter: NumberFormatter()) | |
.textFieldStyle(RoundedBorderTextFieldStyle()) | |
.formLabel(Text("Text Field")) | |
Section() { | |
Picker(selection: .constant(2), label: Text("Menu Picker"), content: { | |
Text("First").tag(1) | |
Text("Second").tag(2) | |
}) | |
.pickerStyle(MenuPickerStyle()) | |
Picker(selection: .constant(2), label: Text("Segment Picker"), content: { | |
Label("First", systemImage: "1.circle.fill").tag(1) | |
Label("Second", systemImage: "2.circle.fill").tag(2) | |
}) | |
.labelStyle(IconOnlyLabelStyle()) | |
.pickerStyle(SegmentedPickerStyle()) | |
Picker(selection: .constant(2), label: Text("Radio Picker"), content: { | |
Text("One").tag(1) | |
Text("Two").tag(2) | |
}) | |
.pickerStyle(InlinePickerStyle()) | |
} | |
Slider(value: .constant(0.5), in: 0...1) { | |
Label("Slider", systemImage: "bolt") | |
} | |
.labelStyle(TitleOnlyLabelStyle()) | |
Stepper( | |
onIncrement: { }, | |
onDecrement: { }, | |
onEditingChanged: { changed in }, | |
label: { | |
Text("Stepper") | |
}) | |
Section() { | |
Toggle("Toggle A", isOn: .constant(true)) | |
.toggleStyle(SwitchToggleStyle()) | |
} | |
} | |
.padding() | |
.frame(width: 270) | |
} | |
} | |
struct ContentView_Previews: PreviewProvider { | |
static var previews: some View { | |
ContentView() | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment