SwiftUI: forcing focus based on state with TabView and watchOS

Question

Created Jun ’21

Replies 3

Boosts 0

Views 2.4k

Participants 2

I'm trying to have a feature where a button enables the digital crown. There are multiple tabs with this button, and I want to be able to scroll between the tabs and keep the mode/crown enabled.

Simulator Screen Shot - Apple Watch Series 6 - 44mm - 2021-06-25 at 13.48.05.png

So for above, my goal is the user could touch 'Enable Crown' and be able to swipe between tabs, keeping the digital crown mode enabled.

I believe that means maintaining focus on an element that has digitalCrownRotation() and focusable().

I got this working somewhat with the code below: if the 2nd tab is not active yet and I enable the crown and swipe to tab #2, the default focus modifier triggers #2 button to get focus and get the crown input.

But after that the buttons lose focus. I've tried various tricks and can't get it working. Complete code is at https://github.com/t9mike/DigitalCrownHelp3.

Any tips and ways to achieve my goal? Thank you.

 import SwiftUI
 
class GlobalState : ObservableObject {
    @Published var enableCrown = false
}
 
struct ChildView: View {
    @State var crownValue = 0.0
    @ObservedObject var globalState = ContentView.globalState
    @Namespace private var namespace
    @Environment(\.resetFocus) var resetFocus
    
    let label: String
 
    init(_ label: String) {
        self.label = label
    }
    
    var body: some View {
        ScrollView {
            Text(label)
            Button("\(globalState.enableCrown ? "Disable" : "Enable") Crown") {
                globalState.enableCrown = !globalState.enableCrown
            }
            .focusable()
            .prefersDefaultFocus(globalState.enableCrown, in: namespace)
            .digitalCrownRotation($crownValue)
            .onChange(of: crownValue, perform: { value in
                print("crownValue is \(crownValue)")
            })
        }
        .focusScope(namespace)
        .onAppear {
            print("\(label), enableCrown=\(globalState.enableCrown)")
            resetFocus(in: namespace)
        }
    }
}
 
struct ContentView: View {
    static let globalState = GlobalState()
    
    var body: some View {
        TabView {
            ChildView("Tab #1")
            ChildView("Tab #2")
        }
    }
}

Boost

Answer 1

BabyJ OP

Jun ’21

I also ran into this problem. I had a custom stepper control in one tab and a Slider in the other tab. I made the custom stepper control respond to the digital crown and made it focusable(). When running the app, going to the second tab worked but returning back to the first froze the whole app. I couldn't get this working properly again. I tried using the new @FocusState property wrapper to control which tab had focus, but that didn't work. I was using Xcode 13, so I didn't know if this was a beta bug.

0

Answer 2

t9mike OP

Jun ’21

Thanks @BabyJ. This one is frustrating because if I could just have a crownSequencer, I could avoid the SwiftUI front-end to the digital crown and I think everything would be much easier. But that is unavailable when using SwiftUI AFAICT.

0

Answer 3

t9mike OP

Jun ’21

Oops. Newb to these forums and answered instead of commented below.

0

	import SwiftUI

	class GlobalState : ObservableObject {
	@Published var enableCrown = false
	}

	struct ChildView: View {
	@State var crownValue = 0.0
	@ObservedObject var globalState = ContentView.globalState
	@Namespace private var namespace
	@Environment(\.resetFocus) var resetFocus

	let label: String

	init(_ label: String) {
	self.label = label
	}

	var body: some View {
	ScrollView {
	Text(label)
	Button("\(globalState.enableCrown ? "Disable" : "Enable") Crown") {
	globalState.enableCrown = !globalState.enableCrown
	}
	.focusable()
	.prefersDefaultFocus(globalState.enableCrown, in: namespace)
	.digitalCrownRotation($crownValue)
	.onChange(of: crownValue, perform: { value in
	print("crownValue is \(crownValue)")
	})
	}
	.focusScope(namespace)
	.onAppear {
	print("\(label), enableCrown=\(globalState.enableCrown)")
	resetFocus(in: namespace)
	}
	}
	}

	struct ContentView: View {
	static let globalState = GlobalState()

	var body: some View {
	TabView {
	ChildView("Tab #1")
	ChildView("Tab #2")
	}
	}
	}