來點心靈(毒)雞湯吧！

（一）作業Demo

（二）Github連結

aamy0927tw/00657025_hw3

（三）App截圖

我也超刺ㄉ

Handsome Peter

每次都會隨機出現一句心靈毒雞湯

加分加分！

（四）文字說明

除了所有基本要求都有用到之外，還用了ActionSheet和動畫這兩種加分功能。

這次做的App是一個很有個性的心靈雞湯，除了療癒ㄉ香菇雞湯，還有一些意想不到ㄉ巫婆湯：）會想做這個是因為在網路上看到很多我很喜歡的小句子，想說可以趁這個機會也分享給大家ʕ •ᴥ•ʔ 不管是心情好還是心情不好的時候，都很適合來玩玩這個App！（App裡面有一欄是幫自己的mood評分，但其實跟後面的雞湯沒有太大關係啦，都可以按按看◉‿◉）

這次卡最久的地方應該是要把第一頁選的生日顯示在第二頁，原本想弄得好看一點，但是改了很久都沒辦法拿到資料讓他顯示出來，所以最後就還是用最普通的辣種(⁎⁍̴̛ᴗ⁍̴̛⁎) 還有中文字的字體真的不ookk，英文都有好多漂亮的字體，中文字我只能盡量讓他不要太怪，才不會看起來像論語：）不過身為一個資工系女生，這個文字質感的部分我還是不要太苛求了（細細的中文字應該是不錯吧！！我的眼光應該沒問題吧！！）

（五）程式碼片段

1.Extract Subview & Binding

struct chooseColor: View {
    @Binding var red: Double
    @Binding var green: Double
    @Binding var blue: Double
    var body: some View {
        VStack {
            HStack {
                Text("Red")
                    .foregroundColor(Color.red)
                Slider(value: $red, in: 0...1)
                    .accentColor(.red)
            }
            HStack {
                Text("Green")
                    .foregroundColor(Color.green)
                Slider(value: $green, in: 0...1)
                    .accentColor(.green)
            }
            HStack {
                Text("Blue")
                    .foregroundColor(Color.blue)
                Slider(value: $blue, in: 0...1)
                    .accentColor(.blue)
            }
        }
    }
}

2.Function Sheet切換頁面

Button(action: {self.showSecondPage = true}) {
                Text("OK!")
                    .font(.headline)
                    .padding()
                    .foregroundColor(.purple)
                    .frame(width: 80, height: 50)
                    .overlay(RoundedRectangle(cornerRadius: 20).stroke(Color.purple, lineWidth: 5))
            }
            .sheet(isPresented: self.$showSecondPage) {
                SecondPage(showSecondPage: self.$showSecondPage, isProfile: self.$isProfile, gender: self.$gender, name: self.$name, birthday: self.$birthday, mood: self.$mood, red: self.$red, green: self.$green, blue: self.$blue)
            }

3.Form

Form {
                Toggle("Do you want to show picture?", isOn: $isProfile)
                if isProfile {
                    VStack(alignment: .leading) {
                        Picker("Gender", selection: $gender) {
                            ForEach(gend, id: \.self) { (gende) in
                                Text(gende)
                            }
                        }
                    .pickerStyle(SegmentedPickerStyle())
                    }
                }
                TextField("What's your Name?", text: $name)
                DatePicker("When is your birthday?", selection: $birthday, in: ...Date(), displayedComponents: .date)
                Stepper(value: $mood, in: -10...10) {
                    if mood < -3 {
                        Text("Mood: Upset")
                    }
                    else if mood > 3 {
                        Text("Mood: Elated")
                    }
                    else {
                        Text("Mood: Normal")
                    }
                }
                chooseColor(red: $red, green: $green, blue: $blue)
            }

4.包含動畫的部分（加分功能）

ZStack {
                if mood < -3 {
                    Text(upset[number])
                        .font(.custom("AvenirNextCondensed-UltraLightItalic", size: 27))
                }
                else if mood > 3 {
                    Text(elated[number])
                        .font(.custom("AvenirNextCondensed-UltraLightItalic", size: 27))
                }
                else {
                    Text(normal[number])
                        .font(.custom("AvenirNextCondensed-UltraLightItalic", size: 27))
                }
                if showUp {
                    Image(systemName: "hand.thumbsup.fill")
                        .font(.system(size: 50))
                        .transition(.opacity)
                        .offset(y: 200)
                }
                if showHeart {
                    Image(systemName: "heart.fill")
                        .font(.system(size: 50))
                        .transition(.opacity)
                        .offset(y: 200)
                }
            }
            .animation(.easeInOut(duration: 3))

5.Alert

Button(action: {self.showAlert = true}) {
                    Text("說得真好！！")
                        .underline()
                }
                .alert(isPresented: $showAlert) { () -> Alert in
                    return Alert(title: Text("Thank you~\n重開一次看看別句！"))
                }

6.ActionSheet（加分功能）

Button(action: {self.showSheet = true}) {
                    Text("按讚！！")
                        .underline()
                }
                .actionSheet(isPresented: $showSheet) {
                    ActionSheet(title: Text("快按快按"), message: Text("有驚喜"), buttons: [.default(Text("讚"), action: {
                        self.showUp = true
                        self.showHeart = false
                    }), .default(Text("愛心"), action: {
                        self.showHeart = true
                        self.showUp = false
                    })])
                }