-
-
Save seanlilmateus/ff64d91db459091c7a42f80fce95deaf to your computer and use it in GitHub Desktop.
Example of aligning labels in SwiftUI.Form on macOS
This file contains hidden or 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