百日 学 Swift (Jour 27) - Projet 4, deuxième partie (Projet 4: Partie 2)
Bâtiment A base layout 1. (créer une mise en page de base)
(1) Ajouter des propriétés de contrôle d'entrée
@State private var wakeUp = Date() // 计划起床时间
@State private var sleepAmount = 8.0 // 期待睡眠时长
@State private var coffeeAmount = 1 // 每日饮用咖啡数量
(2) Construire le squelette de l'interface utilisateur
Utilisez le code suivant pour remplacer la vue texte Hello World par défaut.
NavigationView {
VStack {
// 计划起床时间
Text("打算几点起床呢？")
.font(.headline)
DatePicker("Please enter a time", selection: $wakeUp, displayedComponents: .hourAndMinute)
.labelsHidden()
// 预期睡眠时长
Text("想睡多久呢？")
.font(.headline)
Stepper(value: $sleepAmount, in: 4...12, step: 0.25) {
Text("\(sleepAmount, specifier: "%g") 小时")
}
.padding(.horizontal)
// 每日饮用咖啡杯数
Text("每天喝几杯咖啡☕️？")
.font(.headline)
Stepper(value: $coffeeAmount, in: 1...20) {
Text("\(coffeeAmount) 杯")
}
.padding(.horizontal)
}
}
(3) Bouton Créer et méthode d'appel
- Ajouter des méthodes dans ContentView
func calculateBedtime() {
}
- Ajouter une décoration de bouton à VStack
.navigationBarItems(trailing:
Button(action: calculateBedtime) {
Text("预计就寝时间")
}
)
De cette façon, l'interface est essentiellement construite, mais la méthode d'appel de bouton ne fonctionne pas temporairement car il n'y a pas de code.
2. Connexion de SwiftUI à Core ML (connexion de SwiftUI à Core ML)
(1) Importer le modèle Core ML dans le projet
Le modèle a été créé via Create ML et exporté vers le fichier BetterRest.mlmodel via Output. Recherchez ce fichier, faites-le glisser vers le dossier du projet dans Xcode et renommez-le en SleepCalculator.mlmodel. De cette façon, Xcode créera automatiquement une classe appelée SleepCalculator.
(2) Attributs d'informations d'affichage supplémentaires
@State private var alertTitle = "" // 对话框标题
@State private var alertMessage = "" // 对话框内容
@State private var showingAlert = false // 对话框显示状态
(3) Méthode d'appel du bouton Terminer
// 按钮调用方法
func calculateBedtime() {
let model = SleepCalculator()
let components = Calendar.current.dateComponents([.hour, .minute], from: wakeUp) // 读取起床时间的时和分
let hour = (components.hour ?? 0) * 60 * 60 // 将小时换算成秒
let minute = (components.minute ?? 0) * 60 // 将分钟换算成秒
do {
let prediction = try model.prediction(wake: Double(hour + minute), estimatedSleep: sleepAmount, coffee: Double(coffeeAmount)) // 使用模型预测
let sleepTime = wakeUp - prediction.actualSleep // 得出就寝时间
let formatter = DateFormatter() // 使用 DateFormatter 转换显示格式
formatter.timeStyle = .short
alertTitle = "合理就寝时间是："
alertMessage = formatter.string(from: sleepTime)
} catch {
// 出错处理
alertTitle = "出错啦！~"
alertMessage = "很遗憾，程序发生了错误。"
}
showingAlert = true // 无论是否出错，总是显示对话框
}
(4) Ajoutez un modificateur d'alerte à VStack, de sorte que lorsque la méthode CalculateBedtime se termine, parce que displayAlert est toujours défini sur true, il affiche des informations à l'utilisateur.
.alert(isPresented: $showingAlert) {
Alert(title: Text(alertTitle), message: Text(alertMessage), dismissButton: .default(Text("好")))
}
Il faut dire que la conception globale du programme est arrivée à son terme et quelques ajustements mineurs sont apportés ci-dessous.
Nettoyage de l'interface utilisateur au 3. (interface de finition)
(1) Limitez la plage de sélection de l'heure de réveil
La grande majorité des utilisateurs n'ont fondamentalement aucune exigence de nuit, donc le réglage de l'heure de réveil par défaut entre 6 et 8 heures du matin le rendra plus pratique pour plus d'utilisateurs. Vous pouvez ajouter un attribut d'heure de réveil par défaut:
var defaultWakeTime: Date {
var components = DateComponents()
components.hour = 7
components.minute = 0
return Calendar.current.date(from: components) ?? Date()
}
Il s'agit d'une propriété calculée. Elle utilise DateComponents pour créer une date. La valeur par défaut est 7 h, ce qui peut répondre aux besoins de la plupart des personnes qui doivent régler l'heure de réveil entre 6 h et 8 h. Ensuite, nous utilisons cette propriété comme valeur par défaut de wakeUp.
@State private var wakeUp = defaultWakeTime
Le résultat sera un échec de compilation, l'erreur est la suivante: Cannot use instance member 'defaultWakeTime' within property initializer;cela est dû au fait que Swift ne permet pas à une propriété d'utiliser directement une autre propriété, car on ne sait pas quelle propriété a été créée en premier. La solution consiste à définir defaultWakeTime en tant que variable statique, c'est-à-dire ajouter le mot-clé statique devant var.
static var defaultWakeTime: Date {
(2) Réglage de l'interface
Tout d'abord, vous pouvez remplacer l'intégralité de VStack par Form, afin que la vue entière devienne un formulaire et que la mise en page soit plus régulière qu'elle ne l'est maintenant.
Il y a ensuite deux façons de régler pour chaque élément d'entrée:
- Utilisez le package Section, supprimez la vue Texte et définissez le texte directement dans le titre de la section (je l'ai écrit séparément dans SectionView.swift)
- Utilisez le package VStack pour définir l'alignement et l'espacement
