Swift UI: 製作一款有趣的App

Source: Unplashed

因為上次的作業是在用的太簡單，深深覺得良心過意不去。所以這是Remake 版本。功能的執行上基本上沒他大的問題，這次話不少時間在設計每個頁面的連貫性。雖然每次在寫Code都有新的學習上的領悟，但是舉例成熟的APP界面，考量使用者行為、界面和使用順暢其實還有很大的差距呢！以下是這次作業的產出結果。

GitHub: https://github.com/00757306/Love-Fate

這次主要分為三個分頁來製作

1. Picker
2. Alert & Textfield
3. DatePicker & Toggle

1.第一個畫面(Picker)

使用者可以選擇自己想要的妝容

struct StoryView: View {
    var imageName=["個性","外向","時尚","豐富","空靈"]
    @State private var selectName="活潑"
    @State private var opacityAmount:Double=0
    var body: some View {
        ZStack {
            Image("BG")
            .resizable()
            .scaledToFill()
                .offset(x:-80)
            .frame(width:400,height:1000)
                .opacity(0.4)
            VStack {
                ZStack {
                    Image(selectName)
                    .resizable()
                    .scaledToFill()
                    .frame(width:300,height:300)
                    .clipped()
                    .opacity(1-self.opacityAmount)
                    Image(selectName+"1")
                    .resizable()
                    .scaledToFill()
                    .frame(width:300,height:300)
                    .clipped()
                        .opacity(self.opacityAmount)
                }
                Picker(selection: $selectName, label: Text("類型")){
                    ForEach(imageName,id:\.self){
                        (imageName)in Text(imageName)
                    }
            }
                Text("轉變");
                Slider(value:self.$opacityAmount,in:0...1,minimumValueLabel: Image(systemName:"sun.max.fill").imageScale(.small),maximumValueLabel: Image(systemName:"sun.max.fill").imageScale(.large)){
                    Text("")
                }
        }
        .padding()
    }
}

2.第二個畫面(Alert & Textfield)

struct SecondView: View {
    @State private var prompt=""
    @State private var showAlert=false
    @State private var showToggle=false
    var body: some View {
        ZStack {
            Image("BG")
            .resizable()
            .scaledToFill()
            .frame(width:450,height:1000)
                .opacity(0.5)
            VStack {
                TextField("Type in here",text:$prompt)
                .foregroundColor(Color.white)
                
                .padding()
                    .overlay(RoundedRectangle(cornerRadius: 20).stroke(Color.white,lineWidth:3))
                    .keyboardType(.namePhonePad)
                    .padding()
                Button(action:{self.showAlert=true}){Text("跟男孩說的話")
                    .font(.headline)
                    .foregroundColor(Color.white)
            }
            }
            .padding()
            .alert(isPresented:$showAlert){()->Alert in switch self.prompt{
            case "I love you":
                return Alert(title:Text("愛要說出口噢！"))
            case "I hate you":
                return Alert(title:Text("你太激動了!!"))
            default:
                return Alert(title: Text("保持下去，你可以的"))
                }
                
            }
            Text("")
        }
        
    }
}

3.第三個畫面(DatePicker & Toggle)

struct datePickerView: View {
    @State private var dateSelect=Date()
    let dateFormatter:DateFormatter={
        let dateFormatter=DateFormatter()
        dateFormatter.dateStyle = .medium
        return dateFormatter
    }()
    var date:Int{
        return Calendar.current.component(.year,from:dateSelect)
    }
    @State private var isShowPic=false
    var body: some View {
        VStack {
            ZStack {
                Image("BG")
                .resizable()
                .scaledToFill()
                .frame(width:410,height:1000)
                .opacity(0.5)
                VStack{
                    if isShowPic{
                    Image("Thor")
                    .resizable()
                    .scaledToFill()
                    .frame(width:200,height:400)
                        .offset(y:100)
                    .clipped()
                    Text("雷神男友").foregroundColor(Color.blue)
                    }
                    else{
                        Text("選我吧")
                    }
                    Toggle("心儀對象",isOn:$isShowPic)
                    DatePicker("約會日期",selection: $dateSelect,in:...Date(),displayedComponents: .date)
                    Image("date\(self.date)")
                    .resizable()
                    .scaledToFit()
                    .frame(width:300,height:300)
                    .clipped()
                }
            }
        }.padding()
    }
}