Nous allons créer une mini-application pour watchOS, cette application expliquera également l'utilisation de la rotation de la couronne

Salut! Je développais des applications pour watchOS pendant un certain temps. Je partagerai mes expériences de développement et créerai une nouvelle application à partir de zéro.

Tout d'abord, je dois admettre que ce fut une expérience satisfaisante pour moi. Lutter avec le petit écran, mieux utiliser la zone, penser au design… Heureusement, SwiftUI court pour nous aider ! Maintenant, laissez-moi vous donner les détails de l'application.

L'application propose des fruits à manger aux utilisateurs aujourd'hui, si l'utilisateur ne l'aime pas, il peut changer de fruit en cliquant sur un bouton. De plus, l'utilisateur peut modifier la taille du texte du fruit grâce à une couronne rotative. Quelle application cool, ha ?

Conception

Dans un premier temps, nous devons définir un tableau contenant des fruits.

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

Montrez le fruit et changez au hasard

Maintenant, montrons le fruit d'aujourd'hui et assurons-nous d'obtenir des fruits au hasard à chaque tour.

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

Ajout de texte de bouton et de pied de page

Ajoutons un bouton pour générer un nouveau fruit aléatoire de la même manière et embellissons un peu le design.

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()
        }
    }

Fonctionnalité

Nous devons ajouter le système simple déclenché par la rotation de la couronne. Nous devons définir une nouvelle variable nommée scrollAmount . Cela fait référence au montant rotatif dans la fourchette que nous avons décidée.

@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)

Final

Toutes nos félicitations! Nous avons créé une application pour watchOS. Vous pouvez regarder ci-dessous pour tous les codes sources.

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()
    }
}