How to get apple watch crown rotation direction when using SwiftUI?

Question

I am building a watch app using SwiftUI. For some reason, I need to check if a user rotates the watch crown up or down then show or hide some UIs. I only find this function digitalCrownRotation which can read values from the watch crown, but I have not figured out how to get the rotation directions.

Any hint will be appreciated.

Updata Sample code I am using digitalCrownRotation, but the problem is the scrollview does not scroll now.

struct ContentView: View {
    @State private var up = false
    @State private var scrollAmount = 0.0
    @State private var prevScrollAmount = 0.0

    var body: some View {
        ScrollView {
            Text("""
                Here you can find activities to practise your reading skills. Reading will help you to improve your understanding of the language and build your vocabulary.
                The self-study lessons in this section are written and organised according to the levels of the Common European Framework of Reference for languages (CEFR). There are different types of texts and interactive exercises that practise the reading skills you need to do well in your studies, to get ahead at work and to communicate in English in your free time.
                """
            )
        }
                   .focusable(true)
                   .digitalCrownRotation($scrollAmount)
                   .onChange(of: scrollAmount) { value in
                       self.up = (value > prevScrollAmount)
                       self.prevScrollAmount = value
                    
                    if up {
                        print("up")
                    } else {
                        print("down")
                    }
                   }
    }
}

Answer 1

To find the scroll direction, you will need to keep track of the previous scroll amount and check it with the current amount when the scrollAmount changes. Here is a small complete example:

struct ContentView: View {
    @State private var up = false
    @State private var scrollAmount = 0.0
    @State private var prevScrollAmount = 0.0

    var body: some View {
        Text(up ? "Up" : "Down")
            .focusable(true)
            .digitalCrownRotation($scrollAmount)
            .onChange(of: scrollAmount) { value in
                self.up = (value > prevScrollAmount)
                self.prevScrollAmount = value
            }
    }
}

For more information, read this article: How to read the Digital Crown on watchOS using digitalCrownRotation() .

---

In a scrollview

The crown can only control one view at a time, which I believe means you can't both directly control the scrollView and read the value with .digitalCrownRotation . A way to workaround this limitation is to read the value with .digitalCrownRotation and then set the .content.offset of the scrollView directly.

The problem with this solution is that it contains several magic numbers for the frame height and the scroll minimum and maximum values. These were chosen to make all of the text appear. I know this isn't a perfect solution, but I put it here hoping it will give you something to build upon.

In this example, the background color is green when the scrollview is scrolling up and red when it is scrolling down.

struct ContentView: View {
    @State private var up = false
    @State private var scrollAmount = -190.0
    @State private var prevScrollAmount = -190.0
    
    var body: some View {
        ScrollView {
            Text("""
                Here you can find activities to practise your reading skills. Reading will help you to improve your understanding of the language and build your vocabulary.
                The self-study lessons in this section are written and organised according to the levels of the Common European Framework of Reference for languages (CEFR). There are different types of texts and interactive exercises that practise the reading skills you need to do well in your studies, to get ahead at work and to communicate in English in your free time.
                """
            )
            .frame(height: 530)
            .focusable(true)
            .digitalCrownRotation($scrollAmount, from: -190, through: 190)
            .onChange(of: scrollAmount) { value in
                self.up = (value > prevScrollAmount)
                self.prevScrollAmount = value
                
                if up {
                    print("up")
                } else {
                    print("down")
                }
            }
        }
        .content.offset(x: 0, y: -CGFloat(scrollAmount))
        .background(up ? Color.green : .red)
        
    }
}