Wir werden eine Mini-App für watchOS erstellen, die auch die Verwendung der Kronenrotation erklärt

Hallo! Ich habe eine Zeit lang einige Anwendungen für watchOS entwickelt. Ich werde meine Entwicklungserfahrungen teilen und eine neue App von Grund auf erstellen.

Zunächst einmal muss ich zugeben, dass es für mich eine befriedigende Erfahrung war. Mit dem kleinen Bildschirm zu kämpfen, den Bereich besser zu nutzen, über das Design nachzudenken … Zum Glück läuft SwiftUI, um uns zu helfen! Lassen Sie mich Ihnen nun die Details über die App mitteilen.

Die App schlägt den Benutzern heute Obst zum Essen vor, wenn es dem Benutzer nicht schmeckt, kann er das Obst per Knopfdruck ändern. Außerdem kann der Benutzer die Textgröße der Frucht durch eine drehbare Krone ändern. Was für eine coole App, ha?

Design

Zunächst müssen wir ein Array definieren, das einige Früchte enthält.

@State var fruits = [" Apple", " Cherries", " Strawberry", " Mango"]

Zeigen Sie die Frucht und ändern Sie sie zufällig

Lassen Sie uns nun die Früchte von heute zeigen und sicherstellen, dass Sie auf Schritt und Tritt zufällig Früchte bekommen.

var body: some View {
        VStack{
            Text(fruits[0])
                .font(.system(size: 20))
        }
        .padding()
        .onAppear{
            fruits.shuffle()
        }
}

Schaltflächen- und Fußzeilentext hinzufügen

Lassen Sie uns auf die gleiche Weise eine Schaltfläche zum Generieren einer neuen zufälligen Frucht hinzufügen und das Design ein wenig verschönern.

var body: some View {
        VStack{
            Text(fruits[0])
                .font(.system(size: 20))
            Spacer()
            Button("Random"){
                fruits.shuffle()
            }
            Spacer()
            Divider()
            Spacer()
            Text("Rotate the digital crown to change text size")
                .font(.footnote)
                .multilineTextAlignment(.center)
        }
        .padding()
        .onAppear{
            fruits.shuffle()
        }
    }

Funktionalität

Wir müssen das durch die Kronendrehung ausgelöste einfache System hinzufügen. Wir müssen eine neue Variable namens scrollAmount definieren . Das bezieht sich auf den Rotationsbetrag in dem von uns festgelegten Bereich.

@State var scrollAmount = 14.0

Text(fruits[0]).font(.system(size: scrollAmount))

VStack{
  // Our design
}
.focusable()
.digitalCrownRotation($scrollAmount)

VStack{
  // Our design
}
.focusable()
.digitalCrownRotation($scrollAmount, from: 10, through: 20, by:1, isContinuous: false)

Finale

Glückwunsch! Wir haben einen Antrag für watchOS gestellt. Unten finden Sie alle Quellcodes.

import SwiftUI

struct ContentView: View {
    @State var fruits = [" Apple", " Cherries", " Strawberry", " Mango"]
    
    @State var scrollAmount = 14.0
    
    var body: some View {
        VStack{
            Text(fruits[0])
                .font(.system(size: scrollAmount))
            Spacer()
            Button("Random"){
                fruits.shuffle()
            }
            Spacer()
            Divider()
            Spacer()
            Text("Rotate the digital crown to change text size")
                .font(.footnote)
                .multilineTextAlignment(.center)
        }
        .padding()
        .focusable()
        .digitalCrownRotation($scrollAmount, from: 10, through: 20, by:1, isContinuous: false)
        .onAppear{
            fruits.shuffle()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}