Created
July 21, 2024 19:41
-
-
Save eldaroid/eeda2de99ccf9afc2a97205ae1779c66 to your computer and use it in GitHub Desktop.
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
| extension FocusedValues { | |
| var myKey: Binding<String>? { | |
| get { self[MyFocusKey.self] } | |
| set { self[MyFocusKey.self] = newValue } | |
| } | |
| struct MyFocusKey: FocusedValueKey { | |
| typealias Value = Binding<String> | |
| } | |
| } |
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
| struct LearningFocusPropertyWrappers: View { | |
| @State private var textEditorText: String = "TextEditor" | |
| @State private var secureFieldText: String = "" | |
| @State private var focusStateText: String = "" | |
| @FocusState private var focusState: Field? | |
| enum Field: Hashable { | |
| case username | |
| case password | |
| case state | |
| case value | |
| case object | |
| case binding | |
| } | |
| // ??? | |
| @State private var accessibilityFocusStateText: String = "" | |
| @AccessibilityFocusState(for: .voiceOver) var accessibilityFocusState: Bool | |
| @FocusedObject var data: DataModel? | |
| @StateObject var model = DataModel() | |
| final class DataModel: ObservableObject { | |
| @Published var text = "" | |
| } | |
| @State private var focusedValueText: String = "" | |
| @FocusedValue(\.myKey) var focusedValue | |
| @State private var focusedBindingText: String = "" | |
| @FocusedBinding(\.myKey) var focusedBinding | |
| var body: some View { | |
| VStack { | |
| Text("Learning focused modifier👋") | |
| .font(.system(.largeTitle, design: .rounded, weight: .black)) | |
| Divider() | |
| focusedStateExample | |
| Divider() | |
| focusedValueExample | |
| Divider() | |
| focusedObjectExample | |
| Divider() | |
| focusedBindingExample | |
| } | |
| .padding() | |
| } | |
| @ViewBuilder | |
| private var focusedStateExample: some View { | |
| TextField("", text: $focusStateText, prompt: Text("TextField placeholder"), axis: .vertical) | |
| .textFieldStyle(RoundedBorderTextFieldStyle()) | |
| .focused($focusState, equals: .state) | |
| TextEditor(text: $textEditorText) | |
| .padding(4) | |
| .border(Color.gray, width: 1) | |
| .focused($focusState, equals: .username) | |
| SecureField("Password", text: $secureFieldText) | |
| .focused($focusState, equals: .password) | |
| .textFieldStyle(RoundedBorderTextFieldStyle()) | |
| Button("Remove Focused") { | |
| focusState = .none | |
| } | |
| .controlSize(.extraLarge) | |
| .buttonStyle(.borderedProminent) | |
| } | |
| @ViewBuilder | |
| private var focusedValueExample: some View { | |
| Text(focusedValueText) | |
| TextField("", text: $focusedValueText, prompt: Text("TextField placeholder"), axis: .vertical) | |
| .textFieldStyle(RoundedBorderTextFieldStyle()) | |
| .focused($focusState, equals: .value) | |
| .focusedValue(\.myKey, focusedValue) | |
| Button("Remove FocusedValue") { | |
| focusState = .none | |
| focusedValueText = "" | |
| // focusedValue = "focusedValueText" | |
| // Cannot assign to property: 'focusedForFocusedValue' is a get-only property | |
| } | |
| .controlSize(.extraLarge) | |
| .buttonStyle(.borderedProminent) | |
| } | |
| @ViewBuilder | |
| private var focusedObjectExample: some View { | |
| if let text = data?.text { | |
| Text(text) | |
| } | |
| TextField("", text: $model.text, prompt: Text("TextField placeholder"), axis: .vertical) | |
| .textFieldStyle(RoundedBorderTextFieldStyle()) | |
| .focused($focusState, equals: .object) | |
| .focusedObject(model) | |
| Button("Remove FocusedObject") { | |
| focusStateText = "" | |
| focusState = .none | |
| // model = DataModel() | |
| // Cannot assign to property: 'model' is a get-only property | |
| } | |
| .controlSize(.extraLarge) | |
| .buttonStyle(.borderedProminent) | |
| } | |
| @ViewBuilder | |
| private var focusedBindingExample: some View { | |
| TextField("", text: $focusedBindingText, prompt: Text("TextField placeholder"), axis: .vertical) | |
| .textFieldStyle(RoundedBorderTextFieldStyle()) | |
| .focused($focusState, equals: .binding) | |
| .focusedValue(\.myKey, $focusedBindingText) | |
| Text(focusedBinding ?? "FocusedBinding is nil") | |
| Button("Change FocusedBinding") { | |
| focusedBindingText = "" | |
| focusedBinding = "\(Int.random(in: 0..<100))" | |
| focusState = .none | |
| } | |
| .controlSize(.extraLarge) | |
| .buttonStyle(.borderedProminent) | |
| } | |
| } |
Author
eldaroid
commented
Jul 21, 2024
2024-07-21.22.43.43.mov
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment