(1) App 操作的影片或 gif
(2) GitHub 連結
(3) 特製的 App 畫面截圖

(4) 文字說明
在寫程式的時候再設定Form的樣式有些問題,最後使用Clipped()將旁邊不要的外框修掉。在撰寫ActionSheet時也卡了很久,不知道該如何檢視玩家所選的是哪個選項,後來也未能完成。在點擊畫面中,可以調整Image的大小,但原本想要的效果為根據縮放大小而點擊範圍根著縮放,後來做出來的效果為只要點擊在Frame都算點擊,與縮放無關。也很感謝Peter都很及時也很準確地解決我的問題,才能順利的完成我的App。
(5) 重點程式碼講解
Toggle("Do you want a profile picture?", isOn: $isProfile)
.frame(width:300)
TextField("Your Name", text: $name)
.overlay(RoundedRectangle(cornerRadius:20).stroke(Color.black, lineWidth: 1))
.frame(width:300)
.multilineTextAlignment(.center)
Stepper(value: $age, in: 1...120){
if age == 1 {Text("\(age) year old")}
else {Text("\(age) years old")}
}上面程式碼主要是使用Toggle設定玩家的頭像、使用TextField設定玩家姓名以及Stepper設定玩家年齡。
Form
{
Toggle("Do you want to show your gender?", isOn: $isGender)
if isGender{
Picker("Gender", selection: $selectGender){
ForEach(genders, id: \.self){
(gender) in
Text(gender)
}
}.pickerStyle(SegmentedPickerStyle())
}
DatePicker("Your Birthday", selection: $birthday, in:...Date(), displayedComponents: .date)
}上面程式碼為Form裡包含可以使用Toggle隱藏的性別選擇以及DatePicker可以選擇生日。
Button(action:{
if self.name == ""
{
self.showNameAlert = true
}
else
{
self.showGamePage = true
}})
{
HStack
{
Text("START")
.fontWeight(.semibold)
.font(.title)
Image(systemName: "play")
.font(.title)
}
.padding()
.foregroundColor(Color.white)
.background(Color.red)
.cornerRadius(40)
}
.alert(isPresented: $showNameAlert)
{
() -> Alert in
return Alert(title: Text("Opps!!!"), message: Text("You haven't enter you name."))
}
.sheet(isPresented: self.$showGamePage)
{
GameView(showGamePage: self.$showGamePage, isProfile: self.$isProfile, name: self.$name, birthday: self.$birthday, age: self.$age, isGender: self.$isGender, selectGender: self.$selectGender)
}
}上面程式碼為Start按鈕,包含Alert判斷玩家名稱是否有輸入以及使用Sheet將Binding的參數傳入GameView()。
Button(action:{
self.hitcount[self.selectedIndex] += 1
self.totalhitTime += 1
if self.totalhitTime % 25 == 0 || self.hitcount[self.selectedIndex] == 50
{
self.showHitAlert = true
}})
{
if self.hitcount[self.selectedIndex] >= 50
{
Image(angry[selectedIndex])
.renderingMode(.original)
.resizable()
.scaledToFit()
.scaleEffect(scale)
.brightness(self.brightnessAmount)
.frame(width:300, height:200)
}
else
{
Image(pickName[selectedIndex])
.renderingMode(.original)
.resizable()
.scaledToFit()
.scaleEffect(scale)
.brightness(self.brightnessAmount)
.frame(width:300, height:200)
}
}
.alert(isPresented: $showHitAlert)
{
() -> Alert in
if self.hitcount[self.selectedIndex] == 50
{
return Alert(title: Text("\(pickName[selectedIndex]) is Angry!!"),message: Text("You've hit \(totalhitTime) times in total!"), dismissButton: .default(Text("Keep Going!")))
}
else
{
return Alert(title: Text("You've hit \(totalhitTime) times in total!"), dismissButton: .default(Text("Keep Going!")))
}
}上面程式碼為Image的Button判斷玩家點擊了幾次,每點擊25次會跳出Alert,在每張照片被點擊50次時亦會跳出Alert。
struct BrightnessSlider: View
{
@Binding var brightnessAmount: Double
var body: some View
{
HStack
{
Text("Brightness")
Slider(value: self.$brightnessAmount, in: 0...1, minimumValueLabel: Image(systemName: "sun.max.fill").imageScale(.small), maximumValueLabel: Image(systemName: "sun.max.fill").imageScale(.large)){Text("")}
}
}
}struct ZoomSlider: View
{
@Binding var scale: CGFloat
var body: some View
{
HStack
{
Text("Zoom")
Slider(value: self.$scale, in: 0...1)
Text("\(self.scale, specifier: "%.2f")")
}
}
}
上面程式碼為亮度及縮放的Slider,傳入Binding參數以及將此兩個Slider作為Extract Subview。
(6) 封面圖片

